/* Fontes ---------------------------------------------------------------- */
@font-face {
  font-family: "Atyp Display";
  src: url("./fonts/atyp-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atyp Text";
  src: url("./fonts/atyp-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atyp Text";
  src: url("./fonts/atyp-text-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atyp Text";
  src: url("./fonts/atyp-text-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atyp Text";
  src: url("./fonts/atyp-text-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Acento editorial — usado apenas na palavra de destaque da hero. */
@font-face {
  font-family: "PP Editorial Old";
  src: url("./fonts/pp-editorial-old-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Master palette */
  --ink: #0b0c0c;
  --paper: #f2f0e8;
  --white: #fff;
  --coral: #ff4d24;
  --blue: #7084ff;
  /* Cinza secundário. Sobre --paper o antigo #9d9c96 dava 2,41:1 e reprovava na
     WCAG AA; este dá 4,56:1. O valor antigo passa com folga sobre --ink (7,12:1)
     e ficou reservado em --muted-dark para uso sobre fundo escuro. */
  --muted: #6d6d67;
  --muted-dark: #9d9c96;
  --line: rgba(11, 12, 12, 0.18);
  --line-light: rgba(255, 255, 255, 0.18);

  /* Master type roles. Atyp é a família principal; PP Editorial Old entra só como acento. */
  --font-display: "Atyp Display", "Helvetica Neue", Arial, sans-serif;
  --font-display-alt: "PP Editorial Old", "Iowan Old Style", "Baskerville", serif;
  --font-title: "Atyp Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atyp Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Atyp Text", "Helvetica Neue", Arial, sans-serif;
  --mono: var(--font-mono);

  /* Master scale */
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;
  --tracking-display: -0.038em;
  --tracking-tight: -0.048em;
  --tracking-body: -0.022em;
  --measure-body: 62ch;
  --measure-support: 38ch;
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-reveal: 820ms;
  --abertura: 5s; /* abertura da página: marca girando até a cortina sair */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move: cubic-bezier(0.25, 1, 0.5, 1);

  --page-pad: clamp(1rem, 3vw, 2.75rem);
  /* No topo, o header desce até a folga de cima dos botões igualar a lateral:
     page-pad menos a sobra entre o header (4,6 rem) e o botão (3 rem) */
  --header-descida: calc(var(--page-pad) - 0.8rem);
  --section-space: clamp(4rem, 7vw, 7rem);
  --ease-out: var(--ease-enter);
  --ease-ui: var(--ease-move);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-160%);
  /* Sem transição: ação iniciada por teclado não se anima. O link precisa
     aparecer inteiro no instante do Tab, não deslizar para dentro. */
}

.skip-link:focus {
  transform: translateY(0);
}

/* Abertura (referência: Nixtio): tela cheia com a marca girando; nos
   últimos 700 ms a tela inteira sobe e leva a marca junto. */
.screen-transition {
  position: fixed;
  z-index: 9998;
  inset: 0;
  display: grid;
  pointer-events: none;
  animation: screenOpen 700ms cubic-bezier(0.45, 0, 0.55, 1) calc(var(--abertura) - 700ms) both;
}

.screen-transition span {
  background: var(--ink);
}

/* Navegação interna (referência: Nixtio): no clique, uma tela clara sobe de
   baixo e cobre a página; na página nova, ela continua subindo e sai.
   A abertura de 5 s com a marca fica só para quem chega direto. */
:root.vem-de-transicao {
  --abertura: 0.6s;
}

.vem-de-transicao .screen-transition {
  animation: screenOpen 500ms cubic-bezier(0.45, 0, 0.55, 1) 100ms both;
}

.saindo .screen-transition {
  animation: telaEntra 450ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

.vem-de-transicao .screen-transition span,
.saindo .screen-transition span {
  background: var(--paper);
}

.vem-de-transicao .screen-transition__marca,
.saindo .screen-transition__marca {
  display: none;
}

@keyframes telaEntra {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cursor-halo {
  position: fixed;
  z-index: 130;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width var(--duration-base) var(--ease-move),
    height var(--duration-base) var(--ease-move), opacity var(--duration-fast) ease,
    background var(--duration-base) ease;
  mix-blend-mode: difference;
}

.cursor-halo.is-active {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.12);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.6rem;
  padding-inline: var(--page-pad);
  border: 0;
  color: var(--white);
  pointer-events: none;
  transform: translateY(var(--header-descida));
  transition: color 320ms ease, transform 460ms var(--ease-move);
}

/* Recuo lateral da pílula: some no celular, centra em 60rem no desktop. */
.site-header {
  --recuo-pilula: max(0.5rem, (100vw - 60rem) / 2);
}

.site-header > * {
  pointer-events: auto;
}


.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 460ms var(--ease-move), background-color 300ms ease,
    -webkit-backdrop-filter 300ms ease, backdrop-filter 300ms ease;
}


.site-header.is-scrolled {
  color: var(--ink);
  transform: none;
}

.site-header.is-scrolled::before {
  /* Branca, não cor de papel: sobre a seção clara a pílula precisa se destacar. */
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  filter: drop-shadow(0 10px 24px rgba(11, 12, 12, 0.16))
    drop-shadow(0 1px 0 rgba(11, 12, 12, 0.12));
  clip-path: inset(0.55rem var(--recuo-pilula) 0.55rem var(--recuo-pilula) round 999px);
}


.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: clamp(7rem, 10vw, 9.2rem);
  min-height: 2.6rem;
  transform: translateX(0);
  transition: transform 460ms var(--ease-move);
}


.brand img {
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  transition: filter var(--duration-base) ease, opacity 220ms ease;
}

.brand__marca {
  width: 100%;
  max-height: 2.1rem;
}

/* A assinatura tem razão 3,9: encolhida, some. O símbolo assume. */
.brand__simbolo {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  height: 1.85rem;
  opacity: 0;
  transform: translateY(-50%);
}

.site-header.is-scrolled .brand {
  transform: translateX(calc(var(--recuo-pilula) - var(--page-pad) + 1rem));
}

.header-cta,
.menu-toggle {
  transition: transform 460ms var(--ease-move), background 200ms ease, color 200ms ease,
    border-color 200ms ease;
}

.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .menu-toggle {
  transform: translateX(calc((var(--page-pad) - var(--recuo-pilula)) - 0.4rem));
}

.site-header.is-scrolled .brand img {
  filter: brightness(0);
}

.site-header.is-scrolled .brand__marca {
  opacity: 0;
}

.site-header.is-scrolled .brand__simbolo {
  opacity: 1;
}

.brand img.is-broken {
  display: none;
}

.brand__marca.is-broken ~ .brand-fallback {
  display: inline;
}

.brand-fallback {
  display: none;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.2vw, 2.5rem);
  font-size: 0.86rem;
  font-weight: 600;
}

.desktop-nav a {
  position: relative;
  padding: 0.5rem 0;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-out);
}

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

.header-cta {
  justify-self: end;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  min-height: 3rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  transition: color var(--duration-base) ease, background var(--duration-base) ease,
    border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-move);
}

.button:hover {
  transform: translateY(-2px);
}

.button span {
  font-size: 1.05rem;
}

.button--coral {
  background: var(--coral);
  color: var(--ink);
}

.button--coral:hover {
  background: var(--paper);
  color: var(--ink);
}

.button--outline {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--white);
}

.button--outline:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--ink);
}

.button--ghost {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

.button--ghost:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.button--large {
  min-height: 4.2rem;
  padding-inline: 1.55rem;
  font-size: 1rem;
}

.menu-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  padding: 0.85rem;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  height: 1px;
  margin: 0.28rem 0;
  background: var(--ink);
  transition: transform var(--duration-base) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] span:nth-of-type(2) {
  transform: translateY(3px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-of-type(3) {
  transform: translateY(-2px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 8rem var(--page-pad) 2rem;
  background: var(--ink);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease,
    transform var(--duration-reveal) var(--ease-out);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu nav {
  display: grid;
}

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-light);
  font-size: clamp(2.5rem, 12vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
}

/* só o numerador da linha, não as letras do efeito de rolagem */
.mobile-menu nav a > span:first-child {
  font-size: 0.7rem;
  letter-spacing: 0;
  color: var(--coral);
}

.mobile-menu > p {
  color: rgba(255, 255, 255, 0.58);
}

.hero {
  position: relative;
  min-height: 100svh;
  /* Moldura completa (referência: Nixtio): folga igual nos quatro lados e
     os quatro cantos arredondados */
  margin: 0.35rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 65%;
  background: linear-gradient(to top, rgba(11, 12, 12, 0.92), transparent);
}

.hero-media,
.hero-noise {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.hero-media {
  transform: scale(1.03);
  will-change: transform;
}

.hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  filter: saturate(0.82) contrast(1.08);
}

.hero-noise {
  z-index: -1;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.hero-orbit {
  position: absolute;
  z-index: 2;
  top: 17%;
  right: 8%;
  display: grid;
  width: clamp(7rem, 14vw, 13rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  animation: orbit 18s linear infinite;
}

.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  width: 0.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: none;
}

.hero-orbit::before {
  top: 8%;
  left: 16%;
}

.hero-orbit::after {
  right: 7%;
  bottom: 18%;
  background: var(--muted);
  box-shadow: none;
}

.hero-orbit span {
  font-size: clamp(1.1rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  animation: orbitReverse 18s linear infinite;
}

.hero-topline {
  position: absolute;
  top: 6.4rem;
  left: var(--page-pad);
  right: var(--page-pad);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy {
  position: absolute;
  right: var(--page-pad);
  bottom: clamp(10.2rem, 22vh, 15rem);
  left: var(--page-pad);
}

.hero-kicker {
  margin: 0 0 1.2rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.6rem, 10.6vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.86;
  text-wrap: balance;
}

.hero h1 > span {
  display: block;
  animation: heroIn var(--duration-reveal) var(--ease-out) both;
  animation-delay: var(--duration-base);
}

.hero h1 > span:nth-child(2) {
  animation-delay: calc(var(--duration-base) + var(--duration-fast));
}

.hero h1 > span:nth-child(3) {
  animation-delay: calc(var(--duration-base) + var(--duration-fast) + var(--duration-fast));
}

.outline-word {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.88);
  padding-right: 0.08em;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.hero-footer {
  position: absolute;
  right: var(--page-pad);
  bottom: 2rem;
  left: var(--page-pad);
  display: grid;
  grid-template-columns: minmax(16rem, 0.62fr) 1fr;
  align-items: end;
  gap: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-footer > p {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.hero-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
}

.text-link {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.52);
  font-size: 0.88rem;
  font-weight: 700;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.text-link:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.marquee {
  overflow: hidden;
  padding: 1.2rem 0;
  border-block: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2rem;
  animation: marquee 32s linear infinite;
  white-space: nowrap;
}

.marquee span {
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.marquee b {
  font-size: 1.2rem;
}

.section-pad {
  padding: var(--section-space) var(--page-pad) calc(var(--section-space) * 0.62);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.section-label span {
  display: inline-grid;
  width: 1.65rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 0.58rem;
  letter-spacing: 0;
}

.section-label--dark span {
  background: var(--paper);
  color: var(--ink);
}

.intro {
  min-height: 86vh;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.5fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.intro h2,
.section-heading h2,
.services h2,
.studio h2,
.testimonials h2,
.global h2,
.process h2,
.faq h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.91;
  text-wrap: balance;
}

.intro h2 {
  max-width: 10ch;
  font-size: clamp(3.7rem, 8.7vw, 9rem);
}

.intro-copy {
  max-width: 31rem;
  padding-bottom: 0.7rem;
}

.intro-copy p {
  margin: 0 0 1.3rem;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.intro-copy p:last-child {
  color: var(--muted);
}

.projects,
.services,
.testimonials,
.global,
.process {
  margin: 0 0.35rem;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.48fr;
  align-items: end;
  gap: 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-heading h2 {
  max-width: 12ch;
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  font-size: clamp(3.8rem, 8.4vw, 8.6rem);
}

.section-heading > p {
  max-width: 27rem;
  margin: 0 0 0.8rem auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

.section-heading--compact {
  display: block;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.section-heading--compact h2 {
  max-width: 17ch;
  color: var(--ink);
  font-size: clamp(3rem, 6.8vw, 7rem);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem) 0.8rem;
}

.project-card {
  min-width: 0;
}

.project-card--wide {
  grid-column: 1 / -1;
}

.project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* A moldura é do contêiner, não da arte. Sem ela, a ampliação do hover
     empurra a borda desenhada na imagem para fora e o card perde o limite.
     Mesmo tratamento que .testimonial-card já usava. */
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.project-card--wide .project-media {
  aspect-ratio: 2 / 1;
}

.project-media::after {
  content: "↗";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: var(--ink);
  font-size: 1.15rem;
  opacity: 0;
  transform: translateY(0.7rem) scale(0.8);
  transition: opacity var(--duration-base) ease,
    transform var(--duration-base) var(--ease-out);
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-out),
    filter var(--duration-base) ease;
}

.project-media.has-image-error::before {
  content: "Hagajota Studio";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.32);
  font-size: clamp(1.6rem, 4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.06em;
}

.project-media img.is-broken,
.team-card > img.is-broken,
.testimonial-card > img.is-broken {
  opacity: 0;
}

.project-card:hover .project-media img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.project-card:hover .project-media::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.project-card h3 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.055em;
}

.motion-ready .project-card.is-extra:not(.is-shown) {
  display: none;
}

.load-more {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.load-more b {
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform var(--duration-base) var(--ease-out);
}

.load-more[aria-expanded="true"] b {
  transform: rotate(45deg);
}

.services {
  display: grid;
  grid-template-columns: minmax(17rem, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(3rem, 8vw, 9rem);
  margin-top: 0.65rem;
}

.services-sticky {
  align-self: start;
  position: sticky;
  top: 7rem;
}

.services h2 {
  max-width: 17ch;
  margin-top: clamp(1.6rem, 3vw, 3rem);
  font-size: clamp(2.3rem, 3.9vw, 4.4rem);
  overflow-wrap: normal;
  hyphens: auto;
}

.services-sticky > p {
  max-width: 29rem;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 1.05rem;
}

/* Fios só entre os itens: sem fio acima do primeiro nem abaixo do último */
.service-item {
  border-bottom: 1px solid var(--line-light);
}

.service-item:last-child {
  border-bottom: 0;
}

.service-item summary {
  display: grid;
  grid-template-columns: 2.6rem 3.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: clamp(6.5rem, 10vw, 9rem);
  cursor: pointer;
  list-style: none;
}

.service-item summary::-webkit-details-marker {
  display: none;
}

.service-number {
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.service-item summary img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.78;
}

.service-item summary strong {
  min-width: 0;
  font-size: clamp(1.65rem, 3.2vw, 3.3rem);
  font-weight: 600;
  letter-spacing: -0.055em;
}

.service-badge {
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.service-toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
}

.service-toggle::before,
.service-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1px;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-out);
}

.service-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.service-item[open] .service-toggle {
  border-color: var(--coral);
  background: var(--coral);
}

.service-item[open] .service-toggle::before,
.service-item[open] .service-toggle::after {
  background: var(--ink);
}

.service-item[open] .service-toggle::after {
  transform: translate(-50%, -50%) rotate(0);
}

.service-content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  padding: 0 3.75rem 2.2rem 7.1rem;
}

.service-content p {
  max-width: 38rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.02rem;
}

.service-content a {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.82rem;
  font-weight: 700;
}

.studio {
  background: var(--paper);
}

.studio-copy {
  display: grid;
  grid-template-columns: 0.4fr 1.1fr 0.55fr;
  align-items: start;
  gap: clamp(2rem, 6vw, 7rem);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.studio h2 {
  max-width: 10ch;
  font-size: clamp(3.5rem, 7.5vw, 8rem);
}

.studio-copy > p {
  max-width: 30rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.8rem;
}

.team-card {
  position: relative;
  grid-column: span 4;
  min-height: 31rem;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--white);
}

.team-card:nth-child(4),
.team-card:nth-child(5),
.team-card:nth-child(6),
.team-card:nth-child(7) {
  grid-column: span 3;
  min-height: 27rem;
}

.team-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--duration-base) ease,
    transform var(--duration-reveal) var(--ease-out);
}

.team-card::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to top, rgba(11, 12, 12, 0.88), transparent);
}

.team-card:hover > img {
  filter: grayscale(0);
  transform: scale(1.025);
}

.team-card > div {
  position: absolute;
  z-index: 1;
  right: 1.1rem;
  bottom: 1.15rem;
  left: 1.1rem;
  color: var(--white);
}

.team-card > div > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.team-card h3 {
  margin: 0.3rem 0 0.08rem;
  font-size: clamp(1.45rem, 2.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
}

.team-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8rem;
}

.team-card > a {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: var(--ink);
}

.testimonials-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.stars {
  margin: 1rem 0;
  color: var(--paper);
  letter-spacing: 0.15em;
}

.testimonial-eyebrow {
  margin: clamp(2rem, 4vw, 4rem) 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.85rem;
}

.testimonials h2 {
  font-size: clamp(3.8rem, 8vw, 8rem);
}

.carousel-controls {
  display: flex;
  gap: 0.55rem;
}

.carousel-controls button {
  display: grid;
  width: 3.6rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.15rem;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.carousel-controls button:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--ink);
}

.testimonial-track {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

.testimonial-card {
  display: grid;
  grid-template-columns: minmax(10rem, 0.52fr) minmax(19rem, 1.48fr);
  flex: 0 0 min(78rem, calc(100vw - (var(--page-pad) * 2) - 2rem));
  min-height: 28rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  scroll-snap-align: start;
}

.testimonial-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

.testimonial-body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 4rem);
}

.testimonial-body > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.testimonial-body blockquote {
  margin: auto 0;
  font-size: clamp(1.6rem, 3.2vw, 3.25rem);
  font-weight: 480;
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.testimonial-body footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-body small {
  color: rgba(255, 255, 255, 0.5);
}

.global {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(3rem, 8vw, 9rem);
  min-height: 34rem;
  margin-top: 0.65rem;
  overflow: hidden;
  background: var(--ink);
}

.global-map {
  position: relative;
  align-self: center;
}

.global-map img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.map-pulse {
  position: absolute;
  width: 0.75rem;
  aspect-ratio: 1;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242, 240, 232, 0.55);
  animation: pulse 2.4s infinite;
}

.map-pulse--one {
  top: 32%;
  left: 29%;
}

.map-pulse--two {
  top: 64%;
  left: 47%;
  animation-delay: 700ms;
}

.map-pulse--three {
  top: 38%;
  right: 17%;
  animation-delay: 1300ms;
}

.global-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.global h2 {
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  font-size: clamp(3.2rem, 6vw, 6.3rem);
}

.global h2 em {
  color: var(--coral);
  font-style: normal;
}

.global-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.global-stats > div {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}

.global-stats strong {
  display: block;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.07em;
}

.global-stats span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
}

.clients {
  overflow: hidden;
}

.logo-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--ink) 8%,
    var(--ink) 92%,
    transparent
  );
}

.logo-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.7rem;
  animation: logoMarquee 42s linear infinite alternate;
}

.logo-track img {
  width: clamp(10rem, 16vw, 15rem);
  height: 8.5rem;
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  object-fit: contain;
  filter: grayscale(1);
  background: rgba(255, 255, 255, 0.44);
  transition: filter var(--duration-base) ease, background var(--duration-base) ease;
}

.logo-track img:hover {
  filter: grayscale(0);
  background: var(--white);
}

.process {
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 8vw, 9rem);
}

.process-intro {
  align-self: start;
  position: sticky;
  top: 7rem;
}

.process h2 {
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  font-size: clamp(3.4rem, 6.5vw, 6.8rem);
}

.process h2 span {
  color: rgba(255, 255, 255, 0.35);
}

.process-intro > p {
  max-width: 29rem;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.55);
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 2rem;
  min-height: 9.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line-light);
}

.process-list li:last-child {
  border-bottom: 0;
}

.process-list li > span {
  color: var(--paper);
  font-size: 0.7rem;
}

.process-list h3 {
  margin: 0;
  font-size: clamp(2.2rem, 4.3vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.06em;
}

.process-list p {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.56);
}

.faq {
  display: grid;
  grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 9rem);
}

.faq-intro {
  align-self: start;
  position: sticky;
  top: 7rem;
}

.faq h2 {
  max-width: 11ch;
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  font-size: clamp(3.1rem, 5.7vw, 6rem);
}

.faq-intro > p {
  max-width: 25rem;
  margin-top: 2rem;
  color: var(--muted);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2.8rem;
  align-items: center;
  gap: 1rem;
  min-height: 6.8rem;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary > span {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.faq-list summary b {
  position: relative;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.faq-list summary b::before,
.faq-list summary b::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-list summary b::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list details[open] summary b {
  border-color: var(--coral);
  background: var(--coral);
}

.faq-list details[open] summary b::before,
.faq-list details[open] summary b::after {
  background: var(--ink);
}

.faq-list details[open] summary b::after {
  transform: translate(-50%, -50%);
}

.faq-list details > p {
  max-width: 43rem;
  margin: -0.2rem 3rem 0 3.6rem;
  padding: 0 0 2.2rem;
  color: var(--muted);
  font-size: 1.02rem;
}

.contact {
  position: relative;
  min-height: 100svh;
  margin: 0 0.35rem 0.65rem;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8rem) var(--page-pad) clamp(2.5rem, 4vw, 4rem);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
}

.contact::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 52vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11), transparent 68%);
  filter: blur(20px);
}

.contact::after {
  content: "";
  position: absolute;
  right: 35%;
  bottom: -36%;
  width: 52vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 240, 232, 0.08), transparent 66%);
  filter: blur(30px);
}

.contact-signal {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: 9%;
  display: grid;
  width: clamp(6rem, 12vw, 11rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  animation: orbit 14s linear infinite;
}

.contact-signal span {
  color: var(--paper);
  font-size: clamp(2rem, 4vw, 4rem);
  animation: orbitReverse 14s linear infinite;
}

.contact-proof {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-proof img {
  width: 7.5rem;
  height: 2.7rem;
  object-fit: contain;
}

.contact-proof span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
}

.contact h2 {
  position: relative;
  z-index: 1;
  max-width: 12ch;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 3.5vw, 3rem);
  font-size: clamp(3.5rem, 8.5vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.87;
}

.contact h2 em {
  color: var(--coral);
  font-style: normal;
}

.contact-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.site-footer {
  margin: 0 0.35rem 0.35rem;
  padding: clamp(4rem, 7vw, 7rem) var(--page-pad) 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.35fr 0.55fr 0.45fr;
  gap: 3rem;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.footer-brand img {
  width: min(19rem, 75%);
  max-height: 5rem;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0);
}

.footer-brand p {
  max-width: 28rem;
  margin: 2rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
}

.footer-top nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-top nav > span,
.footer-contact > span {
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer-top nav a,
.footer-contact a {
  padding-bottom: 0.08rem;
  border-bottom: 1px solid transparent;
  font-weight: 600;
}

.footer-top nav a:hover,
.footer-contact a:hover {
  border-color: currentColor;
}

.footer-contact p {
  margin: 1rem 0 0;
  color: var(--muted);
}

.footer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: clamp(9rem, 16vw, 17rem);
}

.footer-stats > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.footer-stats strong {
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.09em;
}

.footer-stats span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.footer-stats img {
  justify-self: center;
  max-width: 10rem;
  max-height: 8rem;
  object-fit: contain;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
}

.footer-bottom a {
  color: var(--ink);
  font-weight: 700;
}

/* Black placeholder contract: replace only src/srcset to install final assets. */
img[src^="./placeholders/"],
source[srcset^="./placeholders/"] + img {
  filter: none !important;
}

.hero-media img[src^="./placeholders/"] {
  opacity: 0.82;
}

/* Typography roles ------------------------------------------------------- */
.hero h1,
.intro h2,
.testimonials h2,
.global h2,
.contact h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
}

.hero h1,
.contact h2 {
  letter-spacing: var(--tracking-tight);
}

.hero h1 {
  line-height: 0.86;
}

.intro h2,
.testimonials h2,
.global h2,
.contact h2 {
  line-height: 0.94;
}

.outline-word {
  font-family: var(--font-display-alt);
  font-style: italic;
  font-weight: 400;
}

.section-heading h2,
.services h2,
.studio h2,
.process h2,
.faq h2,
.project-card h3,
.service-item summary strong,
.team-card h3,
.process-list h3,
.mobile-menu nav a,
.marquee span {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
}

.section-label,
.hero-topline,
.hero-kicker,
.desktop-nav,
.button,
.mobile-menu > p,
.project-meta,
.service-number,
.service-badge,
.team-card > div > span,
.testimonial-eyebrow,
.testimonial-body > span,
.global-stats span,
.process-list li > span,
.contact-proof span,
.footer-top nav > span,
.footer-contact > span,
.footer-stats span,
.footer-bottom {
  font-family: var(--font-mono);
}

p,
blockquote {
  max-width: var(--measure-body);
}

.hero-footer > p,
.section-heading > p,
.services-sticky > p,
.studio-copy > p,
.process-intro > p,
.faq-intro > p,
.contact-proof span {
  max-width: var(--measure-support);
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-reveal) ease,
    transform var(--duration-reveal) var(--ease-enter);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes screenOpen {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-105%);
  }
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(1.1em) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes logoMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% + 100vw - (var(--page-pad) * 2)));
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 240, 232, 0.55);
  }
  70% {
    box-shadow: 0 0 0 1.2rem rgba(242, 240, 232, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 240, 232, 0);
  }
}

@media (max-width: 1024px) {
  .desktop-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto auto;
  }

  .menu-toggle {
    display: block;
    margin-left: 0.4rem;
  }

  .mobile-menu {
    display: flex;
  }

  .intro-grid,
  .section-heading,
  .services,
  .studio-copy,
  .global,
  .process,
  .faq {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    align-items: start;
    margin-top: 7rem;
  }

  .intro-copy {
    margin-left: auto;
  }

  .section-heading > p {
    margin-left: 0;
  }

  .services-sticky,
  .process-intro,
  .faq-intro {
    position: static;
  }

  .service-list,
  .process-list,
  .faq-list {
    margin-top: 2rem;
  }

  .studio-copy {
    grid-template-columns: 0.35fr 1fr;
  }

  .studio-copy > p {
    grid-column: 2;
  }

  .team-card,
  .team-card:nth-child(4),
  .team-card:nth-child(5),
  .team-card:nth-child(6),
  .team-card:nth-child(7) {
    grid-column: span 6;
    min-height: 29rem;
  }

  .global-map {
    order: 2;
    max-width: 47rem;
  }

  .footer-top {
    grid-template-columns: 1.3fr 0.7fr;
  }

  .footer-contact {
    grid-column: 2;
  }

  .footer-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --radius-lg: 24px;
    --radius-md: 14px;
  }

  html {
    scroll-padding-top: 5rem;
  }

  .site-header {
    top: 0.55rem;
    left: 0.65rem;
    right: 0.65rem;
    min-height: 3.6rem;
    padding-left: 0.85rem;
  }

  /* Header de 3,6 rem com botão de 3 rem: a sobra cai para 0,3 rem */
  :root {
    --header-descida: calc(var(--page-pad) - 0.3rem);
  }

  .brand img {
    width: 7rem;
  }

  .header-cta {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .hero {
    min-height: 48rem;
  }

  .hero-topline {
    top: 5.4rem;
  }

  .hero-topline span:nth-child(2) {
    display: none;
  }

  .hero-orbit {
    top: 15%;
    right: 7%;
  }

  .hero-copy {
    bottom: 15.5rem;
  }

  .hero h1 {
    font-size: clamp(2.9rem, 14.6vw, 5.4rem);
    line-height: 0.94;
  }

  .hero-footer {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    bottom: 1.2rem;
  }

  .hero-actions {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .intro {
    min-height: auto;
  }

  .intro-grid {
    margin-top: 5rem;
  }

  .intro h2 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .project-card--wide {
    grid-column: auto;
  }

  .project-card--wide .project-media,
  .project-media {
    aspect-ratio: 4 / 3;
  }

  .service-item summary {
    grid-template-columns: 2.2rem 2.7rem minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .service-item summary img {
    width: 2.4rem;
    height: 2.4rem;
  }

  .service-badge {
    display: none;
  }

  .service-toggle {
    width: 2.4rem;
    height: 2.4rem;
  }

  .service-content {
    grid-template-columns: 1fr;
    padding: 0 0 2rem 5.6rem;
  }

  .studio-copy {
    grid-template-columns: 1fr;
  }

  .studio-copy > p {
    grid-column: auto;
  }

  .team-card,
  .team-card:nth-child(4),
  .team-card:nth-child(5),
  .team-card:nth-child(6),
  .team-card:nth-child(7) {
    grid-column: span 12;
    min-height: 31rem;
  }

  .testimonials-head {
    align-items: end;
  }

  .testimonial-card {
    grid-template-columns: 1fr;
    flex-basis: calc(100vw - (var(--page-pad) * 2) - 1rem);
    min-height: 43rem;
  }

  .testimonial-card > img {
    height: 17rem;
  }

  .testimonial-body blockquote {
    margin: 2.6rem 0;
  }

  .global {
    min-height: auto;
  }

  .global-stats {
    grid-template-columns: 1fr;
  }

  .global-map img {
    min-height: 17rem;
  }

  .process-list li {
    grid-template-columns: 2.5rem 1fr;
  }

  .faq-list summary {
    grid-template-columns: 1.8rem 1fr 2.5rem;
    min-height: 6rem;
  }

  .faq-list details > p {
    margin-right: 0;
    margin-left: 2.8rem;
  }

  .contact {
    min-height: 48rem;
  }

  .contact h2 {
    font-size: clamp(3.1rem, 14.8vw, 5rem);
  }

  .contact-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-contact {
    grid-column: auto;
  }

  .footer-stats {
    min-height: auto;
    padding: 4rem 0;
  }

  .footer-stats strong {
    font-size: clamp(4rem, 22vw, 7rem);
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.7rem;
  }
}

@media (max-width: 430px) {
  .hero-topline span:last-child {
    text-align: right;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .text-link {
    width: max-content;
  }

  .section-heading h2,
  .services h2,
  .studio h2,
  .testimonials h2,
  .global h2,
  .process h2,
  .faq h2 {
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .carousel-controls button {
    width: 3rem;
  }

  .testimonial-card {
    flex-basis: calc(100vw - (var(--page-pad) * 2) - 0.8rem);
  }

  .contact-proof {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-contact,
  .footer-brand {
    grid-column: auto;
  }
}

@media (pointer: coarse) {
  .cursor-halo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .screen-transition {
    display: none;
  }

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

  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Ajustes de acabamento -------------------------------------------------- */

/* Quebra de linha editorial: só a partir de desktop. */
.br-lg {
  display: none;
}

@media (min-width: 900px) {
  .br-lg {
    display: block;
  }
}

/* Nenhuma palavra longa escapa da caixa. */
h2,
h3,
.service-item summary strong,
.faq-list summary {
  overflow-wrap: break-word;
}

.section-heading h2,
.project-card h3,
.team-card h3,
.process-list h3,
.service-item summary strong,
.faq-list summary {
  text-wrap: balance;
}

p,
blockquote,
.services-sticky > p,
.section-heading > p {
  text-wrap: pretty;
}

/* Números não pulam de largura durante a contagem. */
[data-counter],
.global-stats span,
.footer-stats span,
.service-number,
.process-list li > span,
.faq-list summary > span {
  font-variant-numeric: tabular-nums;
}

/* Toque e gesto. */
a,
button,
summary,
.button {
  touch-action: manipulation;
}

.mobile-menu {
  overscroll-behavior: contain;
  padding-top: max(8rem, calc(6rem + env(safe-area-inset-top)));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* Notch e barra inferior. No topo a barra vai de ponta a ponta;
   só a pílula recua para dentro das áreas seguras. */
.site-header {
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  padding-left: max(var(--page-pad), env(safe-area-inset-left));
  padding-right: max(var(--page-pad), env(safe-area-inset-right));
}

.site-header {
  padding-left: max(var(--page-pad), env(safe-area-inset-left));
  padding-right: max(var(--page-pad), env(safe-area-inset-right));
}

.hero-topline,
.hero-footer {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer-bottom {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Área de toque mínima sem alterar o visual do link. */
.text-link,
.service-content a,
.footer-top nav a,
.footer-contact a,
.footer-bottom a {
  position: relative;
}

.text-link::before,
.service-content a::before,
.footer-top nav a::before,
.footer-contact a::before,
.footer-bottom a::before {
  content: "";
  position: absolute;
  inset: -0.62rem 0;
}

@media (hover: none) {
  .text-link::before,
  .service-content a::before,
  .footer-top nav a::before,
  .footer-contact a::before,
  .footer-bottom a::before {
    inset: -0.78rem 0;
  }

  /* PT · EN · ES: alvo de toque de pelo menos 40 px */
  .idiomas a {
    min-width: 2.25rem;
    padding: 0.8rem 0.5rem;
    text-align: center;
  }
}

/* Filhos de flex/grid podem encolher — evita estouro horizontal. */
.testimonials-head,
.section-heading,
.hero-footer,
.footer-top,
.contact-actions {
  flex-wrap: wrap;
}

.testimonials-head > *,
.section-heading > *,
.hero-footer > *,
.footer-stats > *,
.faq-list summary > * {
  min-width: 0;
}

.section-label {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.footer-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .testimonials-head {
    align-items: flex-start;
    row-gap: 1.5rem;
  }

  .faq-list summary {
    grid-template-columns: 2rem minmax(0, 1fr) 2.3rem;
    gap: 0.75rem;
  }

  .faq-list summary b {
    width: 2.3rem;
    height: 2.3rem;
  }

  .footer-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Páginas de projeto ------------------------------------------------------ */

/* Card do projeto agora é link. */
a.project-card {
  display: block;
}

a.project-card:focus-visible {
  outline-offset: 6px;
}

/* Arquivo de projetos ----------------------------------------------------- */
.archive-hero {
  /* Folga em cima igual à da home: o header encaixa na mesma medida */
  margin: 0.35rem 0.35rem 0;
  padding: clamp(8rem, 14vw, 13rem) var(--page-pad) clamp(3.5rem, 6vw, 6rem);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
}

.archive-hero h1 {
  max-width: 14ch;
  margin: clamp(1.6rem, 3vw, 3rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 0.98;
  text-wrap: balance;
}

.archive-hero h1 .outline-word {
  display: inline-block;
}

.archive-hero > p {
  max-width: var(--measure-support);
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.05rem;
}

.archive-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.archive-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}

.archive-stats strong {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.archive-stats span {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* Página de case (referência: Insany, 11/09/2026) --------------------------
   Abertura em painel escuro com moldura completa, como o hero da home: nome
   gigante, introdução nas colunas 7–12, ficha em linhas e imagem grande.
   Depois, galeria no papel, blocos de texto (quando houver material real),
   "Mais projetos" com dois cartões e o fecho de contato. */
.case-hero {
  margin: 0.35rem 0.35rem 0;
  padding: clamp(7rem, 12vw, 10rem) var(--page-pad) var(--page-pad);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
}

.case-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.case-titulo {
  margin: clamp(2.5rem, 6vw, 5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 10.6vw, 9.54rem);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 0.92;
  text-wrap: balance;
}

.case-intro {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 7vw, 6rem);
}

.case-intro__texto {
  max-width: 40ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  letter-spacing: var(--tracking-body);
  line-height: 1.3;
}

/* Ficha técnica em linhas: rótulo à esquerda, valor à direita */
.case-ficha {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  border-bottom: 1px solid var(--line-light);
}

.case-ficha > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-light);
}

.case-ficha dt {
  color: var(--muted-dark);
  font-size: 0.82rem;
}

.case-ficha dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: right;
}

.case-midia {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.case-midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-midia--abertura {
  margin-top: clamp(3rem, 6vw, 5rem);
  aspect-ratio: 16 / 9;
}

/* Galeria no papel: larga, duas meias, larga */
.case-galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: var(--respiro-escuro) calc(var(--page-pad) + 0.35rem);
}

.case-midia--larga {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* Blocos de texto do case: rótulo à esquerda, título e texto nas colunas 7–12 */
.case-bloco {
  display: grid;
  gap: 1.5rem;
  padding: 0 calc(var(--page-pad) + 0.35rem) var(--respiro-escuro);
}

.case-bloco h2 {
  max-width: 24ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: var(--h3-card);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  text-wrap: balance;
}

.case-bloco p,
.case-bloco li {
  max-width: var(--measure-body);
  color: var(--muted);
  font-size: 1.05rem;
}

.case-bloco ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Mais projetos: painel escuro com dois cartões */
.case-mais {
  margin: 0 0.35rem 0.65rem;
  padding: var(--respiro-escuro) var(--page-pad);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
}

.case-mais__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: var(--titulo-conteudo);
}

.case-mais h2 {
  margin: 2rem 0 0;
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 0.93;
}

@media (min-width: 1025px) {
  .case-intro,
  .case-bloco {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .case-intro > .section-label,
  .case-bloco > .section-label {
    grid-column: 1 / 5;
    align-self: start;
  }

  .case-intro__texto,
  .case-bloco__corpo {
    grid-column: 7 / 13;
  }
}

@media (max-width: 720px) {
  .archive-stats {
    grid-template-columns: 1fr;
  }

  .case-galeria {
    grid-template-columns: 1fr;
  }

  .case-midia--larga,
  .case-midia--abertura {
    aspect-ratio: 4 / 3;
  }

  .case-ficha > div {
    flex-direction: column;
    gap: 0.35rem;
  }

  .case-ficha dd {
    text-align: left;
  }
}

/* Hero do arquivo e grade formam um bloco escuro contínuo. */
.archive-hero {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: 0;
}

.archive-hero + .projects {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* E-mail no rodapé quebra sem estourar a coluna. */
.footer-email {
  overflow-wrap: anywhere;
}

/* Página 404 --------------------------------------------------------------- */
.erro-404 {
  display: flex;
  min-height: 78svh;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.erro-404 h1 {
  max-width: 11ch;
}

.erro-404__acoes {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Vídeo da hero ------------------------------------------------------------ */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  filter: saturate(0.82) contrast(1.08);
}

/* Legibilidade do título sobre imagem em movimento. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 58%;
  background: linear-gradient(to bottom, rgba(11, 12, 12, 0.82), transparent);
  pointer-events: none;
}

/* Com vídeo, o placeholder some; sem movimento, ele volta. */
.hero-media:has(.hero-video) picture {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }

  .hero-media:has(.hero-video) picture {
    display: block;
  }
}

/* Marca -------------------------------------------------------------------- */
.screen-transition__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: auto;
  filter: brightness(0) invert(1);
  animation: marcaAbertura calc(var(--abertura) - 700ms) var(--ease-enter) both;
}

/* Até a cortina subir (4,3 s): entra, dá dois giros completos e para em pé.
   Não some: sai junto com a tela. */
@keyframes marcaAbertura {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  90%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(720deg) scale(1);
  }
}

/* O hero só entra quando a cortina já está subindo: clareia e sobe. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 > span {
    animation-delay: calc(var(--abertura) - 450ms);
  }

  .hero h1 > span:nth-child(2) {
    animation-delay: calc(var(--abertura) - 450ms + var(--duration-fast));
  }

  .hero h1 > span:nth-child(3) {
    animation-delay: calc(var(--abertura) - 450ms + 2 * var(--duration-fast));
  }

  .hero-topline,
  .hero-kicker,
  .hero-footer {
    animation: heroSobe var(--duration-reveal) var(--ease-out) calc(var(--abertura) - 300ms) both;
  }
}

@keyframes heroSobe {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Rolagem de letras nos links ---------------------------------------------- */
.text-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.24;
}

.text-roll__linha {
  display: block;
  white-space: nowrap;
}

.text-roll__linha--sob {
  position: absolute;
  inset: 0;
}

.text-roll span {
  display: inline-block;
  transition: transform 420ms var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 32ms);
}

.text-roll__linha--sob span {
  transform: translateY(105%);
}

@media (hover: hover) and (pointer: fine) {
  .link-roll:hover .text-roll__linha span,
  .link-roll:focus-visible .text-roll__linha span {
    transform: translateY(-105%);
  }

  .link-roll:hover .text-roll__linha--sob span,
  .link-roll:focus-visible .text-roll__linha--sob span {
    transform: translateY(0);
  }
}

/* Sem hover no toque: as letras sobem quando o menu abre. */
@media (hover: none) {
  .mobile-menu .text-roll__linha--sob {
    display: none;
  }
}

.mobile-menu nav .text-roll__linha span {
  transform: translateY(105%);
}

.mobile-menu.is-open nav .text-roll__linha span {
  animation: letraSobe 560ms var(--ease-enter) forwards;
  animation-delay: calc(var(--i, 0) * 26ms + var(--linha, 0) * 70ms);
}

@keyframes letraSobe {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-roll span,
  .mobile-menu nav .text-roll__linha span {
    transform: none;
    transition: none;
    animation: none;
  }

  .text-roll__linha--sob {
    display: none;
  }

  .screen-transition__marca {
    animation: none;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .brand,
  .brand img {
    transition: none;
  }
}

/* ============================================================
   Modal de orçamento
   Usa <dialog> nativo: foco preso, Escape e ::backdrop sem JS.
   Espaçamentos em múltiplos de 8. Cores só por token.
   ============================================================ */

.orcamento {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(11, 12, 12, 0.28);
}

.orcamento::backdrop {
  background: rgba(11, 12, 12, 0.62);
}

/* Entrada a partir do gatilho: sobe e assenta. Saída não anima. */
@media (prefers-reduced-motion: no-preference) {
  .orcamento[open] {
    animation: orcamento-entra 260ms var(--ease-enter);
  }
  .orcamento[open]::backdrop {
    animation: orcamento-veu 260ms var(--ease-enter);
  }
}

@keyframes orcamento-entra {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@keyframes orcamento-veu {
  from {
    opacity: 0;
  }
}

.orcamento__caixa {
  display: grid;
  gap: 32px;
  padding: 40px;
  overflow-y: auto;
  max-height: calc(100dvh - 32px);
}

.orcamento__fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.orcamento__fechar:hover {
  background: rgba(11, 12, 12, 0.06);
}

.orcamento__topo {
  display: grid;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.orcamento__rotulo {
  display: block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.orcamento__rostos {
  display: flex;
  margin-bottom: 16px;
}

.orcamento__rostos img {
  width: 48px;
  height: 48px;
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.orcamento__rostos img + img {
  margin-left: -16px;
}

.orcamento__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.orcamento__apoio {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--coral);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.orcamento__grade {
  display: grid;
  gap: 24px;
}

.campo {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.campo label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.campo label b {
  color: var(--coral);
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  touch-action: manipulation;
  transition: border-color var(--duration-fast) ease;
}

.campo textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.campo select {
  appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.campo :is(input, select, textarea):focus-visible {
  outline: none;
  border-bottom-color: var(--coral);
  box-shadow: 0 1px 0 0 var(--coral);
}

.campo ::placeholder {
  color: var(--muted);
  opacity: 1;
}

.campo[data-invalido] :is(input, select, textarea) {
  border-bottom-color: var(--coral);
}

.campo__erro {
  min-height: 0;
  color: var(--coral);
  font-size: 0.75rem;
  line-height: 1.4;
}

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

.orcamento__rodape {
  display: grid;
  gap: 16px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.orcamento__rodape .button {
  justify-self: start;
}

.orcamento__aviso {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.orcamento__estado {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.orcamento__estado[data-tom="erro"] {
  color: var(--coral);
}

.orcamento[data-enviando] .orcamento__caixa {
  opacity: 0.6;
  pointer-events: none;
}

@media (min-width: 720px) {
  .orcamento__caixa {
    padding: 48px;
  }

  .orcamento__topo {
    grid-template-columns: 1fr 280px;
    align-items: end;
  }

  .orcamento__grade {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .campo--largo {
    grid-column: 1 / -1;
  }

  .orcamento__rodape {
    grid-template-columns: auto 1fr;
    gap: 32px;
  }
}

@media (max-width: 719px) {
  .orcamento {
    width: calc(100vw - 16px);
    border-radius: var(--radius-md);
  }

  .orcamento__caixa {
    padding: 32px 24px;
    gap: 24px;
  }
}

/* ---- Seletor próprio: painel flutuante com a opção em destaque ----
   O <select> nativo continua no DOM como fonte da verdade do formulário;
   este widget só o espelha. Sem JS, o nativo aparece e funciona. */

.escolha {
  position: relative;
}

.escolha__nativo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.escolha__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--duration-fast) ease;
}

.escolha__gatilho[data-vazio] {
  color: var(--muted);
}

.escolha__gatilho:focus-visible {
  outline: none;
  border-bottom-color: var(--coral);
  box-shadow: 0 1px 0 0 var(--coral);
}

.escolha__seta {
  flex: none;
  transition: transform var(--duration-fast) var(--ease-enter);
}

.escolha__gatilho[aria-expanded="true"] .escolha__seta {
  transform: rotate(180deg);
}

.escolha__painel {
  position: absolute;
  z-index: 4;
  top: calc(100% + 8px);
  left: -8px;
  right: -8px;
  max-height: 232px;
  padding: 8px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 16px 40px rgba(11, 12, 12, 0.18);
  list-style: none;
  margin: 0;
}

.escolha__painel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .escolha__painel {
    animation: escolha-abre 140ms var(--ease-enter);
  }
}

@keyframes escolha-abre {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.escolha__opcao {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
}

.escolha__opcao[data-ativa],
.escolha__opcao:hover {
  background: rgba(11, 12, 12, 0.06);
}

.escolha__opcao[aria-selected="true"] {
  background: var(--coral);
  color: var(--white);
  font-weight: 600;
}

.campo[data-invalido] .escolha__gatilho {
  border-bottom-color: var(--coral);
}

/* ---- Botão de envio: pílula escura em caixa alta ---- */

.orcamento__enviar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duration-fast) var(--ease-enter),
    background var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .orcamento__enviar:hover {
    background: var(--coral);
    transform: translateY(-1px);
  }
}

.orcamento__enviar:active {
  transform: translateY(0);
}

.orcamento__enviar svg {
  flex: none;
}

/* ==========================================================================
   Rodada PSD — 11/09/2026
   Porta para o site o layout revisado no PSD: grid de 12 colunas, escala
   de títulos 86 / 48 / 32 px, respiro de 96 px nas seções escuras e 160 px
   nas claras. As classes antigas continuam valendo nas páginas de projeto.
   ========================================================================== */

@font-face {
  font-family: "Atyp Text";
  src: url("./fonts/atyp-text-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --col-gap: 0.8rem;
  --h2: clamp(2.75rem, 5.97vw, 5.375rem);
  --h3-lista: clamp(1.75rem, 3.33vw, 3rem);
  --h3-card: clamp(1.5rem, 2.22vw, 2rem);
  --respiro-escuro: clamp(4rem, 6.67vw, 6rem);
  --respiro-claro: clamp(5rem, 11.1vw, 10rem);
  --titulo-conteudo: clamp(3rem, 6.67vw, 6rem);
  --fio-claro: rgba(11, 12, 12, 0.14);
}

/* Respiro padrão --------------------------------------------------------- */
.projects,
.services,
.testimonials,
.process {
  padding-top: var(--respiro-escuro);
  padding-bottom: var(--respiro-escuro);
}

.intro,
.studio,
.global,
.faq {
  padding-top: var(--respiro-claro);
  padding-bottom: var(--respiro-claro);
}

.intro {
  min-height: auto;
}

/* Escala de títulos: um H2 só para todas as seções --------------------- */
.intro h2,
.section-heading h2,
.services h2,
.studio h2,
.testimonials h2,
.global h2,
.process h2,
.faq h2,
.contact h2 {
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 0.93;
}

.section-label + h2,
.section-heading .section-label + h2,
.services-sticky .section-label + h2,
.process-intro .section-label + h2,
.faq-intro .section-label + h2,
.global-copy .section-label + h2,
.testimonials-head .section-label + h2 {
  margin-top: 2rem;
}

/* Hero ------------------------------------------------------------------- */
.hero-topline {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.08em;
}

.hero h1 {
  max-width: none;
}

/* Único itálico da página: a palavra que importa, em coral cheio. */
.hero-accent {
  color: var(--coral);
  font-family: var(--font-display-alt);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
}

.hero-copy {
  bottom: clamp(12rem, 24vh, 13.5rem);
}

.hero-footer {
  bottom: 4rem;
  padding-top: 2rem;
}

.button--white,
.header-cta.button--coral {
  background: var(--white);
  color: var(--ink);
}

.button--white:hover,
.header-cta.button--coral:hover {
  background: var(--coral);
  color: var(--ink);
}

.site-header.is-scrolled .header-cta.button--coral {
  background: var(--ink);
  color: var(--white);
}

.site-header.is-scrolled .header-cta.button--coral:hover {
  background: var(--coral);
  color: var(--ink);
}

/* Intro e pilares -------------------------------------------------------- */
.intro-grid {
  margin-top: 2rem;
}

.intro-copy p:last-child {
  color: var(--muted);
}

.pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2rem;
  margin: var(--titulo-conteudo) 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--fio-claro);
  list-style: none;
}

.pilares h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pilares h3 img {
  width: 1rem;
  height: 1rem;
}

.pilares p {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.17rem);
}

/* Projetos: carrossel lateral ------------------------------------------- */
.projects-head {
  margin-bottom: var(--titulo-conteudo);
}

.projects-head__lado p {
  max-width: 27rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
}

/* Botão "Ver todos os projetos": fecha a seção, depois do último cartão */
.projects-mais {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}

.projects-track {
  --card: calc((100% - 11 * var(--col-gap)) / 12 * 5 + 4 * var(--col-gap));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card);
  gap: var(--col-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.projects-track::-webkit-scrollbar {
  display: none;
}

.projects-track .project-card {
  scroll-snap-align: start;
}

.projects-track .project-media {
  aspect-ratio: 4 / 5;
  border-color: rgba(255, 255, 255, 0.13);
}

.projects-track .project-meta {
  justify-content: flex-start;
  gap: 0;
}

.projects-track .project-meta span + span::before {
  content: "·";
  margin: 0 0.6em;
}

.projects-track .project-card h3 {
  margin-top: 0.5rem;
  font-size: var(--h3-card);
}

/* Serviços --------------------------------------------------------------- */
.services h2 {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.services-sticky > p {
  margin-top: 2rem;
}

.service-item summary img {
  width: 3rem;
  height: 3rem;
  filter: none;
  opacity: 1;
}

.service-item summary strong {
  font-size: var(--h3-lista);
}

.service-content p {
  max-width: 21rem;
}

/* Estúdio ---------------------------------------------------------------- */
.studio-grid {
  display: grid;
  gap: 3rem var(--col-gap);
  margin-top: var(--titulo-conteudo);
}

.team-card--solo {
  min-height: 0;
  aspect-ratio: 3 / 4;
  border: 0;
  background: var(--ink);
}

.team-card--solo h3 {
  font-size: var(--h3-card);
}

.studio-lado {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

.studio-topicos {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fio-claro);
  list-style: none;
}

.studio-topicos li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--fio-claro);
}

.studio-topicos li > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.6rem;
}

.studio-topicos strong {
  font-size: 1.17rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.studio-topicos p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.studio-bio p {
  max-width: 27rem;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1.17rem;
}

.text-link--escuro {
  border-bottom-color: rgba(11, 12, 12, 0.52);
  color: var(--ink);
}

/* Depoimentos ------------------------------------------------------------ */
.testimonials-head {
  margin-bottom: var(--titulo-conteudo);
}

.testimonial-body blockquote {
  font-size: clamp(1.5rem, 2.22vw, 2rem);
  line-height: 1.25;
}

/* Atuação global: seção clara, logos passam dentro dela ---------------- */
.global {
  margin: 0;
  overflow: visible;
  min-height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  row-gap: 0;
}

.global-map img {
  border-radius: var(--radius-md);
  opacity: 1;
}

.global-stats {
  margin-top: 4rem;
  gap: var(--col-gap);
}

.global-stats > div {
  border-top-color: var(--fio-claro);
}

.global-stats span {
  color: var(--muted);
}

.logo-marquee {
  grid-column: 1 / -1;
  margin-top: var(--titulo-conteudo);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.global .logo-track {
  gap: var(--col-gap);
}

.global .logo-track img {
  width: calc((100vw - 2 * var(--page-pad) - 11 * var(--col-gap)) / 12 * 2 + var(--col-gap));
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Processo --------------------------------------------------------------- */
.process-list li {
  min-height: 10rem;
  padding: 2rem 0;
  align-items: start;
}

.process-list li > span {
  margin-top: 0.55rem;
}

.process-list h3 {
  font-size: var(--h3-lista);
  line-height: 1;
}

/* FAQ -------------------------------------------------------------------- */
.faq-intro > p {
  margin-top: 2rem;
}

/* Contato ---------------------------------------------------------------- */
.contact {
  min-height: auto;
  padding-top: var(--respiro-escuro);
  padding-bottom: var(--respiro-escuro);
}

.contact h2 {
  margin: 4rem 0;
}

/* Rodapé: frase em display e a marca monumental cortada pela borda ------ */
.site-footer {
  overflow: hidden;
  padding-bottom: 0;
}

.footer-brand p {
  max-width: 30rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h3-card);
  letter-spacing: var(--tracking-display);
  line-height: 1.25;
}

.footer-bottom {
  border-top: 0;
  padding-top: 1.5rem;
}

.footer-marca {
  margin-top: var(--titulo-conteudo);
  /* Corta 18% da altura (as hastes do g e do j). Margem em % usa a largura. */
  margin-bottom: calc(-18% * 326 / 1268);
}

.footer-marca img {
  width: 100%;
  height: auto;
  filter: brightness(0);
}

/* Grid de 12 colunas: só no desktop ------------------------------------- */
@media (min-width: 1025px) {
  .intro-grid,
  .projects-head,
  .services,
  .studio-grid,
  .global,
  .process,
  .faq {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .intro-grid {
    align-items: start;
  }

  .intro h2 {
    grid-column: 1 / 9;
  }

  .intro-copy {
    grid-column: 9 / 13;
    max-width: none;
    padding: 0;
  }

  .projects-head {
    align-items: start;
    row-gap: 0;
  }

  .projects-head > div:first-child {
    grid-column: 1 / 9;
  }

  /* rótulo (1,65 rem) + 2 rem, menos a diferença de altura de maiúscula:
     o topo das letras do texto fica na linha do topo das letras do título */
  .projects-head__lado {
    grid-column: 9 / 13;
    padding-top: 3.52rem;
  }

  .services {
    row-gap: 0;
  }

  .services-sticky {
    grid-column: 1 / 6;
  }

  .service-list {
    grid-column: 7 / 13;
  }

  .service-item summary {
    --c: calc((100% - 5 * var(--col-gap)) / 6);
    grid-template-columns: calc(var(--c) + var(--col-gap)) calc(var(--c) + var(--col-gap)) minmax(0, 1fr) auto auto;
    column-gap: 0;
  }

  .service-badge {
    margin-right: 1rem;
  }

  .service-content {
    padding: 0 0 2.2rem calc((100% - 5 * var(--col-gap)) / 6 * 2 + 2 * var(--col-gap));
  }

  .team-card--solo {
    grid-column: 1 / 6;
  }

  .studio-lado {
    grid-column: 7 / 13;
  }

  .global {
    align-items: start;
  }

  .global-copy {
    grid-column: 1 / 7;
  }

  .global-map {
    grid-column: 7 / 13;
    align-self: start;
    /* rótulo (1,65 rem) + 2 rem: o mapa começa na linha do título */
    margin-top: 3.65rem;
  }

  .process-intro {
    grid-column: 1 / 6;
  }

  .process-list {
    grid-column: 7 / 13;
  }

  .process-list li {
    --c: calc((100% - 5 * var(--col-gap)) / 6);
    grid-template-columns: calc(var(--c) + var(--col-gap)) minmax(0, 1fr);
    gap: 0;
  }

  .faq-intro {
    grid-column: 1 / 6;
  }

  .faq-list {
    grid-column: 6 / 13;
  }
}

/* Tablet e celular ------------------------------------------------------- */
@media (max-width: 1024px) {
  .projects-head {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .projects-track {
    grid-auto-columns: 62%;
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }

  .team-card--solo {
    max-width: 30rem;
  }

  .global-map {
    order: 2;
    margin-top: 3rem;
  }

  .logo-marquee {
    order: 3;
  }
}

@media (max-width: 720px) {
  .projects-track {
    grid-auto-columns: 84%;
  }

  .pilares {
    grid-template-columns: 1fr;
  }

  .global-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .global .logo-track img {
    width: 8rem;
    height: 3rem;
  }

  .contact h2 {
    margin: 2.5rem 0;
  }
}

/* O link "Solicitar orçamento" da hero é um <button>: zera o fundo e a
   borda padrão do navegador, que o transformavam numa caixa branca. */
button.text-link {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.52);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button.text-link:hover {
  border-bottom-color: var(--coral);
  color: var(--coral);
}

/* "marca." encosta em "vira", como no PSD. Só quando as duas dividem a
   linha: no celular "marca." quebra e o recuo a jogaria para fora da margem. */
@media (min-width: 721px) {
  .hero-accent {
    margin-left: -0.14em;
  }
}

/* Hero no celular: o título quebra em 3 linhas e o rodapé da hero empilha
   texto e botões, então o título precisa subir mais que no desktop. */
@media (max-width: 720px) {
  .hero-footer {
    bottom: 1.5rem;
    padding-top: 1.25rem;
  }

  .hero-copy {
    bottom: 17.5rem;
  }
}

@media (max-width: 430px) {
  .hero-copy {
    bottom: 17.75rem;
  }
}

/* Projetos: rolagem lateral fixa ------------------------------------------
   O trilho externo recorta; o interno (.projects-rail) é o que desliza.
   Sem JS, no celular ou com movimento reduzido, fica o arraste nativo. */
.projects-track {
  display: block;
}

.projects-rail {
  --card: calc((100% - 11 * var(--col-gap)) / 12 * 5 + 4 * var(--col-gap));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card);
  gap: var(--col-gap);
}

.projects.is-pinado .projects-fixo {
  position: sticky;
  top: var(--pino-topo, 4rem);
}

.projects.is-pinado .projects-track {
  overflow: hidden;
  scroll-snap-type: none;
}

.projects.is-pinado .projects-rail {
  will-change: transform;
}

@media (max-width: 1024px) {
  .projects-rail {
    grid-auto-columns: 62%;
  }
}

@media (max-width: 720px) {
  .projects-rail {
    grid-auto-columns: 84%;
  }
}

/* Passagem obrigatória: o trilho trava em qualquer tela. O card encolhe
   (--card-max, calculado no script) para o quadro caber inteiro na altura. */
.projects-rail {
  grid-auto-columns: min(var(--card), var(--card-max, 100vw));
}

@media (max-width: 1024px) {
  .projects-rail {
    --card: 62%;
  }
}

@media (max-width: 720px) {
  .projects-rail {
    --card: 84%;
  }
}

/* Projetos: pilha de cartões ----------------------------------------------
   Cada cartão trava abaixo do cabeçalho; o seguinte sobe e o cobre,
   deixando 16 px de borda de cada cartão de trás à mostra. */
.projects-stack {
  --pilha-topo: 6rem;
  display: grid;
  gap: 12vh;
}

.stack-card {
  position: sticky;
  top: calc(var(--pilha-topo) + var(--i, 0) * 1rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  height: min(calc(100vh - var(--pilha-topo) - 6rem), 40rem);
  padding: var(--col-gap);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  background: #141515;
  box-shadow: 0 -1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.stack-card__media {
  grid-column: 1 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - var(--col-gap));
}

.stack-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-out);
}

.stack-card:hover .stack-card__media img {
  transform: scale(1.03);
}

.stack-card__info {
  grid-column: 9 / 13;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1rem 1.5rem 1.5rem;
}

.stack-card__num {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.11em;
}

.stack-card .project-meta {
  justify-content: flex-start;
  gap: 0;
  margin: 0;
}

.stack-card .project-meta span + span::before {
  content: "·";
  margin: 0 0.6em;
}

.stack-card h3 {
  margin: 0.75rem 0 0;
  font-family: var(--font-title);
  font-size: var(--h3-lista);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-wrap: balance;
}

.stack-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.52);
  font-size: 0.88rem;
  font-weight: 700;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.stack-card:hover .stack-card__cta {
  border-color: var(--coral);
  color: var(--coral);
}

@media (max-width: 1024px) {
  .projects-stack {
    --pilha-topo: 5rem;
    gap: 8vh;
  }

  .stack-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 1rem;
    height: min(calc(100vh - var(--pilha-topo) - 4rem), 36rem);
  }

  .stack-card__media,
  .stack-card__info {
    grid-column: 1;
  }

  .stack-card__info {
    gap: 1rem;
    padding: 0.5rem 0.75rem 0.75rem;
  }
}

/* Depoimentos: um por vez ---------------------------------------------------
   Número gigante ao fundo (parallax no mouse), coluna lateral com rótulo
   vertical e progresso, citação que entra palavra por palavra. */
.depo {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  min-height: 30rem;
  padding-bottom: 5rem;
  overflow: hidden;
}

.depo__numero {
  position: absolute;
  top: 50%;
  left: -2rem;
  z-index: 0;
  color: rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
  font-size: clamp(12rem, 31vw, 28rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transform: translate3d(var(--px, 0px), calc(-50% + var(--py, 0px)), 0);
}

.depo__numero span {
  display: block;
  transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter),
    filter 600ms var(--ease-enter);
}

.depo__numero.is-saindo span {
  opacity: 0;
  transform: scale(1.1);
  filter: blur(10px);
}

.depo__numero.is-entrando span {
  opacity: 0;
  transform: scale(0.8);
  filter: blur(10px);
  transition: none;
}

.depo__lateral {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  border-right: 1px solid var(--line-light);
}

.depo__rotulo {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.depo__progresso {
  position: relative;
  width: 1px;
  height: 8rem;
  background: var(--line-light);
}

.depo__progresso span {
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleY(var(--progresso, 0.11));
  transform-origin: top;
  transition: transform 500ms var(--ease-enter);
}

.depo__centro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0 3rem 4rem;
}

.depo__empresa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin: 0 0 2rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  transition: opacity 400ms ease, transform 400ms var(--ease-enter);
}

.depo__empresa span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--coral);
}

.depo__empresa b {
  font-weight: 500;
}

.depo__citacao {
  min-height: 9rem;
  margin: 0 0 3rem;
  max-width: 52rem;
  font-family: var(--font-display);
  font-size: var(--h3-lista);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  perspective: 40rem;
}

.depo__citacao .palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.25rem) rotateX(90deg);
  transform-origin: bottom;
  transition: opacity 500ms var(--ease-enter), transform 500ms var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 50ms);
}

.depo__citacao.is-visivel .palavra {
  opacity: 1;
  transform: none;
}

.depo__citacao.is-saindo .palavra {
  opacity: 0;
  transform: translateY(-0.6rem);
  transition-duration: 200ms;
  transition-delay: calc(var(--i, 0) * 15ms);
}

.depo__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.depo__autor {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: opacity 400ms ease, transform 400ms var(--ease-enter);
}

.depo__autor i {
  width: 2rem;
  height: 1px;
  background: var(--white);
  transform-origin: left;
  transition: transform 600ms var(--ease-enter) 300ms;
}

.depo__autor strong {
  display: block;
  font-weight: 600;
}

.depo__autor small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

.depo.is-trocando .depo__empresa {
  opacity: 0;
  transform: translateX(1.25rem);
}

.depo.is-trocando .depo__autor {
  opacity: 0;
  transform: translateY(-1.25rem);
}

.depo.is-trocando .depo__autor i {
  transform: scaleX(0);
  transition-delay: 0ms;
}

.depo__nav {
  display: flex;
  gap: 1rem;
}

.depo__botao {
  position: relative;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.depo__botao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: translateX(-100%);
  transition: transform 300ms var(--ease-enter);
}

.depo__botao[data-depo-proximo]::before {
  transform: translateX(100%);
}

.depo__botao svg {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .depo__botao:hover {
    border-color: var(--white);
    color: var(--ink);
  }

  .depo__botao:hover::before {
    transform: translateX(0);
  }
}

.depo__botao:active {
  transform: scale(0.95);
}

.depo__ticker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.08;
  pointer-events: none;
}

.depo__ticker div {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}

.depo__ticker span {
  padding-right: 2rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  letter-spacing: var(--tracking-display);
}

@media (max-width: 720px) {
  .depo {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: 4rem;
  }

  .depo__lateral {
    display: none;
  }

  .depo__centro {
    padding: 1rem 0 2rem;
  }

  .depo__numero {
    left: -1rem;
    font-size: 14rem;
  }

  .depo__citacao {
    min-height: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .depo__citacao .palavra {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .depo__ticker div {
    animation: none;
  }
}

/* Time — acordeão de retratos ------------------------------------------- */
.time {
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
  margin-top: var(--titulo-conteudo);
}

.time__card {
  position: relative;
  overflow: hidden;
  height: 26rem;
  border-radius: 24px;
  background: var(--ink);
  outline: none;
}

.time__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-enter);
}

.time__card::before {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 12, 12, 0.72), transparent);
  pointer-events: none;
}

.time__info {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 0.35rem;
  padding: 1.5rem;
  color: #f2f0e8;
}

.time__info span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(242, 240, 232, 0.7);
}

.time__info h3 {
  margin: 0;
  font-size: var(--h3-card);
  letter-spacing: -0.03em;
  line-height: 1;
}

.time__info p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(242, 240, 232, 0.8);
}

.time__card:focus-visible {
  box-shadow: 0 0 0 3px var(--coral);
}

.time + .studio-grid {
  margin-top: 4rem;
}

/* Acordeão horizontal em todas as telas. O card aberto é o .is-ativo:
   no mouse ele segue o ponteiro, no toque abre com um toque (script.js). */
.time {
  flex-direction: row;
  height: clamp(26rem, 38vw, 34rem);
}

.time__card {
  flex: 1 1 0;
  height: auto;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: flex-grow 600ms cubic-bezier(0.5, 0.85, 0.25, 1.15);
}

.time__card.is-ativo {
  flex-grow: 2.4;
  cursor: default;
}

.time__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(242, 240, 232, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.time:hover .time__card:not(.is-ativo)::after {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .time__card:not(.is-ativo)::after {
    opacity: 1;
  }
}

.time__info > * {
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 200ms ease, transform 350ms var(--ease-enter);
}

.time__card.is-ativo .time__info > * {
  opacity: 1;
  transform: none;
  transition-delay: 250ms;
}

.time__card.is-ativo .time__info p {
  transition-delay: 380ms;
}

@media (hover: hover) and (pointer: fine) {
  .time__card.is-ativo:hover img {
    transform: scale(1.03);
  }
}

/* Celular: o aberto fica bem maior e o texto pode quebrar linha. */
@media (max-width: 720px) {
  .time {
    height: 28rem;
  }

  .time__card.is-ativo {
    flex-grow: 4;
  }

  .time__info {
    padding: 1.1rem;
  }

  .time__info > * {
    white-space: normal;
  }

  .time__info h3 {
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .time + .studio-grid .studio-topicos {
    grid-column: 1 / 7;
  }

  .time + .studio-grid .studio-bio {
    grid-column: 8 / 13;
    align-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .time__card,
  .time__card img,
  .time__info > *,
  .time__card::after {
    transition: none !important;
  }
}

/* Estúdio — fechamento: manifesto + três pilares em colunas ------------- */
.time + .studio-grid {
  display: grid;
  gap: 3rem var(--col-gap);
  margin-top: var(--titulo-conteudo);
}

.time + .studio-grid .studio-bio {
  display: grid;
  gap: 2rem;
  order: -1;
}

.time + .studio-grid .studio-bio p {
  max-width: 22ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.time + .studio-grid .studio-bio .text-link {
  justify-self: start;
}

.time + .studio-grid .studio-topicos {
  display: grid;
  gap: var(--col-gap);
  border-top: 0;
}

.time + .studio-grid .studio-topicos li {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 0;
}

.time + .studio-grid .studio-topicos li > span {
  color: var(--coral);
}

.time + .studio-grid .studio-topicos p {
  max-width: 24ch;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .time + .studio-grid .studio-topicos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .time + .studio-grid {
    row-gap: 6rem;
  }

  .time + .studio-grid .studio-bio {
    grid-column: 1 / 13;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }

  .time + .studio-grid .studio-bio p {
    grid-column: 1 / 9;
    max-width: none;
  }

  .time + .studio-grid .studio-bio .text-link {
    grid-column: 10 / 13;
    justify-self: end;
  }

  .time + .studio-grid .studio-topicos {
    grid-column: 1 / 13;
  }
}

/* Hero ocupa exatamente a primeira dobra em qualquer tela ---------------
   Altura travada em 100svh (a menor área visível, com a barra do navegador
   aparecendo), para os cantos arredondados ficarem sempre dentro da tela.
   O conteúdo sai do posicionamento absoluto e vira coluna: faixa do topo,
   título empurrado para baixo e rodapé da hero colado na base. */
.hero {
  display: flex;
  flex-direction: column;
  /* a tela menos a folga de 0,35 rem em cima e embaixo */
  height: calc(100vh - 0.7rem);
  height: calc(100svh - 0.7rem);
  min-height: 0;
  padding: calc(6.4rem + var(--header-descida)) var(--page-pad) 4rem;
}

.hero-topline,
.hero-copy,
.hero-footer {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.hero-copy {
  margin-top: auto;
  margin-bottom: clamp(1.5rem, 6svh, 4.5rem);
}

.hero h1 {
  font-size: min(9.54rem, 10.6vw, 19svh);
}

@media (max-width: 720px) {
  .hero {
    padding: calc(5.4rem + var(--header-descida)) var(--page-pad) 1.5rem;
  }

  .hero-copy {
    margin-bottom: clamp(1.25rem, 4svh, 2.5rem);
  }

  .hero h1 {
    font-size: min(14.6vw, 11svh);
  }
}

/* Celular deitado ou tela muito baixa: tudo encolhe para caber. */
@media (max-height: 540px) {
  /* Celular deitado: a hero não trava na altura da tela, cresce para caber
     os botões (travada, o rodapé dela era cortado) */
  .hero {
    height: auto;
    min-height: calc(100svh - 0.7rem);
    padding-top: calc(4.6rem + var(--header-descida));
    padding-bottom: 1rem;
  }

  .hero h1 {
    font-size: 13svh;
  }

  .hero-kicker {
    display: none;
  }

  .hero-footer {
    padding-top: 0.75rem;
  }
}

/* Respiro mínimo entre a faixa do topo, o título e o rodapé da hero. */
.hero {
  row-gap: 1.25rem;
}

@media (min-width: 721px) and (max-height: 720px) {
  .hero h1 {
    font-size: min(9.54rem, 10.6vw, 16svh);
  }
}

/* Revisão do celular ----------------------------------------------------
   No celular o espaço título → conteúdo cai para 48 px (no desktop segue
   96 px), o time vira faixa deslizante e os rótulos do topo da hero
   ficam legíveis. */
@media (max-width: 720px) {
  :root {
    --titulo-conteudo: 3rem;
  }

  .hero-topline {
    font-size: 0.6875rem;
  }

  .time + .studio-grid {
    margin-top: 3.5rem;
  }
}

@media (max-width: 720px) {
  .process-list,
  .faq-list,
  .service-list {
    margin-top: 0;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .process-list,
  .faq-list,
  .service-list {
    margin-top: 0;
  }
}

/* Varredura UI/UX: número dos pilares em tinta (coral pequeno sobre o
   papel não passa no contraste mínimo). */
.time + .studio-grid .studio-topicos li > span {
  color: var(--ink);
}

/* Varredura UI/UX: textos de apoio pequenos demais no desktop. */
.time + .studio-grid .studio-topicos p {
  font-size: 1rem;
}

.global-stats span,
.global-stats p {
  font-size: 0.875rem;
}

/* Contato com vídeo de fundo ---------------------------------------------
   Véu escuro mais forte à esquerda, onde ficam título e botões. */
.contact-video,
.contact-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-video {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.8) contrast(1.06);
}

.contact-veu {
  z-index: 1;
  background:
    linear-gradient(to top, rgba(11, 12, 12, 0.7), transparent 45%),
    linear-gradient(to right, rgba(11, 12, 12, 0.9) 0%, rgba(11, 12, 12, 0.6) 55%, rgba(11, 12, 12, 0.35) 100%);
}

.contact-signal {
  z-index: 2;
}

.contact-proof,
.contact h2,
.contact-actions {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .contact-veu {
    background: linear-gradient(to top, rgba(11, 12, 12, 0.88), rgba(11, 12, 12, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-video {
    display: none;
  }
}

/* Atuação global — órbitas no lugar do mapa, nomes no lugar dos logos ---- */
.global-texto {
  max-width: 26rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.17rem);
}

.global-orbita {
  position: relative;
  align-self: center;
}

.orbita {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.orbita__anel {
  fill: none;
  stroke: var(--fio-claro);
  stroke-width: 1;
}

.orbita__linha {
  stroke: var(--ink);
  stroke-opacity: 0.16;
  stroke-width: 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.2s var(--ease-enter) calc(var(--i) * 70ms);
}

.global-orbita.is-visible .orbita__linha {
  stroke-dashoffset: 0;
}

.orbita__pais {
  opacity: 0;
  transition: opacity 500ms ease calc(400ms + var(--i) * 70ms);
}

.global-orbita.is-visible .orbita__pais {
  opacity: 1;
}

.orbita__pais circle {
  fill: var(--ink);
}

.orbita__pais text {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.orbita__centro {
  fill: var(--coral);
}

.orbita__pulso {
  fill: var(--coral);
  transform-box: fill-box;
  transform-origin: center;
  animation: orbitaPulso 2.4s ease-out infinite;
}

.orbita__macae {
  fill: var(--coral);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@keyframes orbitaPulso {
  from {
    opacity: 0.45;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(3.4);
  }
}

.nomes-marquee {
  grid-column: 1 / -1;
  order: 3;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  overflow: hidden;
  border-top: 1px solid var(--fio-claro);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.nomes-marquee__trilho {
  display: flex;
  width: max-content;
  animation: nomesCorre 45s linear infinite;
}

.nomes-marquee__trilho span {
  padding-right: 0.4em;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  opacity: 0.2;
  white-space: nowrap;
}

@keyframes nomesCorre {
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 1025px) {
  .global-orbita {
    grid-column: 7 / 13;
  }
}

@media (max-width: 1024px) {
  .global-orbita {
    order: 2;
    max-width: 36rem;
    margin: 3rem auto 0;
  }
}

@media (max-width: 720px) {
  .orbita__pais text {
    font-size: 20px;
  }

  .orbita__macae {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbita__pulso,
  .nomes-marquee__trilho {
    animation: none;
  }

  .orbita__linha {
    stroke-dashoffset: 0;
    transition: none;
  }

  .orbita__pais {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 1024px) {
  .global-orbita {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .global-orbita {
    margin-top: 2.5rem;
  }

  .orbita__pais text {
    font-size: 25px;
  }

  .orbita__macae {
    font-size: 20px;
  }

  .orbita__pais circle {
    r: 6px;
  }
}

/* Celular: o diagrama encolhe para os nomes dos países caberem na tela. */
@media (max-width: 720px) {
  .global-orbita {
    width: 76%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Celular: diagrama só com os pontos; os países viram lista de 2 colunas. */
.global-paises {
  display: none;
}

@media (max-width: 720px) {
  .global-orbita {
    width: 100%;
  }

  .orbita {
    width: 82%;
    margin: 0 auto;
  }

  .orbita__pais text {
    display: none;
  }

  .global-paises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem var(--col-gap);
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--fio-claro);
    list-style: none;
  }

  .global-paises li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .global-paises li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ink);
  }
}

/* Atuação global — mapa-múndi em pontos, feito em código --------------- */
.mapa {
  grid-column: 1 / -1;
  order: 2;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.mapa__moldura {
  position: relative;
  overflow: hidden;
}

.mapa__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mapa__terra path {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.2;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.mapa__terra .mapa__terra-destaque {
  stroke: var(--coral);
  stroke-opacity: 0.55;
}

/* Revelação: os pontos entram da esquerda para a direita. */
.mapa__terra {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.mapa.is-visible .mapa__terra {
  clip-path: inset(0 0 0 0);
}

.mapa__arco {
  fill: none;
  stroke: var(--coral);
  stroke-opacity: 0.45;
  stroke-width: 1.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-enter) calc(1.2s + var(--i) * 120ms), stroke-opacity 250ms ease, stroke-width 250ms ease;
}

.mapa.is-visible .mapa__arco {
  stroke-dashoffset: 0;
}

.mapa__cometa {
  fill: var(--coral);
}

.mapa__cometas {
  opacity: 0;
  transition: opacity 600ms ease 2.4s;
}

.mapa.is-visible .mapa__cometas {
  opacity: 1;
}

.mapa__pais,
.mapa__sede {
  cursor: pointer;
}

.mapa__ponto {
  fill: var(--coral);
  stroke: var(--paper, #f2f0e8);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.6s + var(--i, 0) * 120ms);
}

.mapa.is-visible .mapa__ponto {
  transform: scale(1);
}

.mapa__ponto--sede {
  fill: var(--ink);
  stroke: var(--coral);
  stroke-width: 2;
  transition-delay: 1s;
}

.mapa__pulso {
  fill: var(--coral);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.mapa.is-visible .mapa__pulso {
  animation: mapaPulso 2.6s ease-out calc(2s + var(--i, 0) * 180ms) infinite;
}

.mapa.is-visible .mapa__pulso--sede {
  animation-delay: 1.2s;
}

@keyframes mapaPulso {
  from {
    opacity: 0.4;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(4.2);
  }
}

.mapa__rotulo {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  paint-order: stroke;
  stroke: var(--paper, #f2f0e8);
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 200ms ease, transform 250ms var(--ease-enter);
  pointer-events: none;
}

.mapa__rotulo--sede {
  fill: var(--coral);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mapa.is-visible .mapa__rotulo--sede,
.mapa__pais.is-ativo .mapa__rotulo,
.mapa__sede.is-ativo .mapa__rotulo {
  opacity: 1;
  transform: none;
}

.mapa.is-visible .mapa__rotulo--sede {
  transition-delay: 1.4s;
}

/* Um país em foco: o arco dele acende e os outros recuam. */
.mapa.tem-ativo .mapa__arco {
  stroke-opacity: 0.12;
}

.mapa.tem-ativo .mapa__arco.is-ativo {
  stroke-opacity: 1;
  stroke-width: 1.8;
}

.mapa__pais.is-ativo .mapa__ponto {
  fill: var(--ink);
}

.mapa__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mapa__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--fio-claro);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.mapa__chip span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.mapa__chip small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mapa__chip--sede span {
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--coral);
}

.mapa__chip.is-ativo {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.mapa__chip.is-ativo small {
  color: rgba(255, 255, 255, 0.6);
}

/* Celular: o mapa amplia e enquadra das Américas à Índia. */
@media (max-width: 720px) {
  .mapa {
    margin-top: 2.5rem;
  }

  .mapa__svg {
    width: 175%;
    margin-left: -36%;
  }

  .mapa__terra path {
    stroke-width: 3;
  }

  .mapa__legenda {
    margin-top: 1.75rem;
  }

  .mapa__chip {
    min-height: 2.25rem;
    padding: 0 0.85rem;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mapa__terra,
  .mapa__arco,
  .mapa__ponto,
  .mapa__cometas,
  .mapa__rotulo {
    transition: none;
  }

  .mapa__terra {
    clip-path: none;
  }

  .mapa__arco {
    stroke-dashoffset: 0;
  }

  .mapa__ponto {
    transform: none;
  }

  .mapa__cometas {
    display: none;
  }

  .mapa.is-visible .mapa__pulso {
    animation: none;
  }
}

/* Atuação global centralizada ------------------------------------------
   Topo e base iguais ao respiro das seções claras; título → mapa usa o
   espaço padrão título → conteúdo. */
.global {
  padding-top: var(--respiro-claro);
  padding-bottom: var(--respiro-claro);
}

.global .global-copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

.global .global-copy .section-label {
  justify-content: center;
  margin: 0;
}

.global .global-copy h2 {
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

.global .mapa {
  margin-top: var(--titulo-conteudo);
}

.global .mapa__legenda {
  justify-content: center;
}

.global-clientes {
  grid-column: 1 / -1;
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--respiro-escuro);
  text-align: center;
}

.global-clientes__rotulo {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.global-clientes__titulo {
  margin: 1.25rem 0 0;
  font-size: var(--h3-lista);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.global-clientes .nomes-marquee {
  align-self: stretch;
  margin-top: 3rem;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 720px) {
  .global-clientes__titulo {
    font-size: 1.9rem;
  }

  .global-clientes .nomes-marquee {
    margin-top: 2rem;
  }
}

/* Coluna centralizada: os itens não podem crescer além da largura da tela. */
.global .global-copy,
.global .mapa,
.global-clientes {
  min-width: 0;
  max-width: 100%;
}

.global .global-copy > *,
.global-clientes > * {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .global {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bandeiras no lugar dos pontos (mapa e legenda) ------------------------ */
.mapa__bandeira {
  filter: drop-shadow(0 1px 1.5px rgba(11, 12, 12, 0.28));
}

.mapa.is-visible .mapa__pais.is-ativo .mapa__ponto,
.mapa.is-visible .mapa__sede.is-ativo .mapa__ponto {
  transform: scale(1.45);
  transition-delay: 0s;
}

.mapa__rotulo--sede {
  transform: translate(3px, 3px);
}

.mapa.is-visible .mapa__rotulo--sede {
  transform: translate(3px, 0);
}

.mapa__chip-bandeira {
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 2px;
}

/* <use> não aceita fill-box: a origem vem do style de cada bandeira. */
.mapa__bandeira {
  transform-box: view-box;
}

/* Header cápsula (referência: Dinamite Criativa, 11/09/2026) ---------------
   No topo, barra aberta: marca à esquerda; à direita, botão, Instagram, fio,
   PT · EN · ES e menu. Ao rolar vira a pílula branca de 50 rem. Os links
   de navegação vivem no menu de tela cheia, em todos os tamanhos. */
.site-header {
  --recuo-pilula: max(0.5rem, (100vw - 50rem) / 2);
  grid-template-columns: 1fr auto;
}

.header-acoes {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
  transition: transform 460ms var(--ease-move);
}

/* O grupo inteiro entra na pílula; os botões não se deslocam sozinhos. */
.site-header.is-scrolled .header-acoes {
  transform: translateX(calc((var(--page-pad) - var(--recuo-pilula)) - 0.4rem));
}

.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .menu-toggle {
  transform: none;
}

.header-social {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: background var(--duration-base) ease, color var(--duration-base) ease;
}

.header-social:hover {
  background: var(--coral);
  color: var(--ink);
}

.header-fio {
  width: 1px;
  height: 2rem;
  background: rgba(255, 255, 255, 0.24);
}

.idiomas {
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.idiomas a {
  padding: 0.5rem 0.35rem;
  opacity: 0.5;
  transition: opacity var(--duration-base) ease;
}

.idiomas a:hover,
.idiomas a[aria-current="true"] {
  opacity: 1;
}

.menu-toggle {
  display: block;
  flex: none;
  margin-left: 0;
}

/* Dentro da pílula branca: tudo em tinta */
.site-header.is-scrolled .header-social {
  background: rgba(11, 12, 12, 0.06);
  color: var(--ink);
}

.site-header.is-scrolled .header-social:hover {
  background: var(--coral);
}

.site-header.is-scrolled .header-fio {
  background: rgba(11, 12, 12, 0.16);
}

.site-header.is-scrolled .menu-toggle {
  background: transparent;
}

/* Menu de tela cheia em todos os tamanhos: links, botões e rodapé */
.mobile-menu {
  display: flex;
  justify-content: flex-start;
  overflow-y: auto;
}

/* Links do menu medidos também pela altura: cinco linhas, botões e rodapé
   cabem na tela; em telas muito baixas o menu rola por dentro */
.mobile-menu {
  padding-top: max(7rem, calc(5.5rem + env(safe-area-inset-top)));
}

.mobile-menu > nav a {
  font-size: max(2rem, min(5rem, 12vw, 6svh));
  line-height: 1.05;
}

/* A regra dos links grandes vale para qualquer nav do menu: os idiomas
   do rodapé voltam a ser uma linha de rótulos */
.mobile-menu .idiomas {
  display: flex;
}

.mobile-menu .idiomas a {
  display: inline;
  padding: 0.5rem 0.35rem;
  border-bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.mobile-menu__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0;
}

.mobile-menu__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
}

.mobile-menu__rodape p {
  margin: 0 0 0 auto;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: right;
}

/* No celular a barra fica só com a marca e o menu, como na referência */
@media (max-width: 720px) {
  .header-acoes > .header-social,
  .header-acoes > .header-fio,
  .header-acoes > .idiomas {
    display: none;
  }

  .mobile-menu__rodape p {
    margin-left: 0;
    text-align: left;
  }
}