/* =========================================================================
   Meraki — IDV aplicada
   Fiel ao Figma "IDV-Meraki-aplicada" (frame Slide, 1920 x 8385)

   Escala: 1rem = 16px quando a viewport tem 1920px (16 / 1920 = 0.83333vw).
   Todas as medidas do Figma são escritas em rem (px_do_figma / 16), então o
   layout escala proporcionalmente e fica pixel-perfect em 1920.
   Abaixo de 1080px entra o layout mobile.
   ========================================================================= */

:root {
  --white: #ffffff;
  --black: #000000;
  --muted: #7d7d7d;
  --soft: #f4f4f4;

  --grad-text: linear-gradient(-1.45deg, #707070 7.5946%, #ffffff 75.094%);
  --grad-service: linear-gradient(90deg, #5103c1 0%, #010202 100%);

  --marquee-speed: 60s;
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  /* 0.8333vw = 16px em 1920 (a referência do Figma). O teto de 16px trava a
     escala aí: acima de 1920 o layout continua ocupando a tela inteira (as
     posições são em %), mas texto e blocos param de crescer — é isso que dá
     o respiro em telas grandes. */
  font-size: clamp(7.5px, 0.8333333vw, 16px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  /* clip (e não hidden): não cria contexto de rolagem, então position:sticky
     dos cases continua funcionando */
  overflow-x: clip;
}

img { max-width: 100%; }

picture { display: block; }

p, h1, h2, h3, blockquote, figure { margin: 0; }

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

.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;
}

.grad-text {
  background-image: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================================
   BOTÕES
   A camada de hover/clique mora em buttons.css, compartilhada com as
   páginas legais (e com os outros sistemas da Meraki). Aqui ficam só os
   comportamentos que são específicos deste site.
   ========================================================================= */

/* o play do case é redondo: cresce e afunda, sem varredura */
.case__play:active {
  transform: translate(-50%, -50%) scale(0.92);
  transition-duration: 0.11s;
}

/* links do menu e do rodapé ganham um traço que cresce do centro */
.nav-menu a,
.footer-nav a,
.footer-legal a,
.footer-legal__btn {
  position: relative;
}

.nav-menu a::after,
.footer-nav a::after,
.footer-legal a::after,
.footer-legal__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.28em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.35s var(--ease-out-soft);
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.footer-nav a:hover::after,
.footer-legal a:hover::after,
.footer-legal__btn:hover::after { transform: scaleX(1); }

/* =========================================================================
   REVEAL NO SCROLL — reanima nos dois sentidos (descendo e subindo)
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 0.9s var(--ease-out-soft),
    transform 0.9s var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Se o JS não rodar, nada fica invisível */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* =========================================================================
   HEADER  (Figma: pill 80,46 · 1761x110 · r48 · rgba(44,44,44,.2))
   ========================================================================= */
.site-header {
  position: absolute;
  top: 2.875rem;
  left: 4.1667%;   /* 80 / 1920 */
  right: 4.1146%;  /* 79 / 1920 */
  z-index: 50;
}

.nav-pill {
  height: 6.875rem;
  border-radius: 3rem;
  /* efeito de vidro: o Figma usa fill rgba(44,44,44,.2) sobre o hero, o que
     no Figma já lê como vidro. No navegador só a cor fica "chapada" — o blur
     e a borda de luz reproduzem a leitura do design. */
  background: rgba(44, 44, 44, 0.2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.124% 0 3.4639%;  /* 55 e 61 sobre 1761 */
}

.nav-logo img {
  width: 11.6875rem;
  height: 2.6392rem;
  display: block;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  width: 46.79%; /* 824 / 1761 — mantém o ritmo do Figma em qualquer largura */
}

.nav-menu a {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.0833;
  letter-spacing: -0.02em;
  color: var(--white);
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible { opacity: 0.6; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   HERO  (0 – 1080)
   ========================================================================= */
.hero {
  position: relative;
  height: 67.5rem;
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; }

/* =========================================================================
   FUNDOS EM VÍDEO (hero, sobre e contato)
   O poster é background-image do contêiner, não atributo poster="": assim
   ele aparece antes de o JS escolher a fonte, some sozinho quando o vídeo
   ganha quadros por cima, e ainda pode trocar por media query.
   ========================================================================= */
.hero__bg,
.about__bg,
.cta__bg {
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero__bg  { background-image: url("../img/hero-poster.webp"); }
.about__bg { background-image: url("../img/sobre-poster.webp"); }
.cta__bg   { background-image: url("../img/form-poster.webp"); }

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* Véu de contraste: o vídeo é bem mais claro e movimentado que o still que
   ele substituiu, e o título passava por cima do arco-íris. O gradiente
   escurece só onde há texto (centro e topo), preservando o brilho das bordas. */
.hero__bg::before,
.cta__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__bg::before {
  background:
    radial-gradient(ellipse 58% 50% at 50% 44%,
                    rgba(0, 0, 0, 0.74) 0%,
                    rgba(0, 0, 0, 0.42) 55%,
                    rgba(0, 0, 0, 0) 80%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 24%);
}

/* no contato o formulário ocupa a metade direita */
.cta__bg::before {
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0) 28%,
              rgba(0, 0, 0, 0.55) 52%,
              rgba(0, 0, 0, 0.72) 100%);
}

/* Figma: inner shadow 0 -169 62.2 -54 #000 */
.hero__bg::after,
.about__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -10.5625rem 3.8875rem -3.375rem var(--black);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  font-size: 1.5rem;
  line-height: 1.0833;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__inner .eyebrow { margin-top: 20.375rem; }

.hero__title {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.09375;
  letter-spacing: -0.02em;
  margin-top: 1.625rem;
}

.btn-outline {
  margin-top: 2.25rem;
  width: 19.6875rem;
  height: 3.625rem;
  border: 1px solid var(--white);
  border-radius: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1.0833;
}

.scroll-cue {
  margin-top: 21rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  animation: cue-in 0.9s var(--ease-out-soft) 0.28s both;
}

@keyframes cue-in {
  from { opacity: 0; transform: translateY(1.75rem); }
}

.scroll-cue__mouse {
  position: relative;
  width: 2.125rem;
  height: 2.8333rem;
  flex: none;
}

.scroll-cue__shell { width: 100%; height: 100%; display: block; }

.scroll-cue__wheel {
  position: absolute;
  left: 0.63625rem;
  top: 0.7725rem;
  width: 0.8486rem;
  height: 1.281rem;
  animation: wheel-bob 1.8s ease-in-out infinite;
}

@keyframes wheel-bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(0.28rem); opacity: 0.55; }
}

.scroll-cue__label {
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--soft);
}

/* =========================================================================
   MARCAS  (1084 – 1186)
   ========================================================================= */
.clients {
  position: relative;
  height: 6.625rem;
}

.clients__label {
  position: absolute;
  left: 4.7396%;   /* 91 / 1920 */
  top: 0.5625rem;
  /* 11.9% em vez dos 13.02% do Figma: a caixa de texto do Figma passava por
     baixo do início da faixa de logos (x=324) */
  width: 11.9%;
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
  z-index: 2;
}

.marquee {
  position: absolute;
  left: 16.875%;   /* 324 / 1920 */
  right: 0;
  top: 0.25rem;
  height: 6.375rem;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: marquee var(--marquee-speed) linear infinite;
}

.marquee__track--reverse { animation-direction: reverse; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
  height: 100%;
  flex: none;
}

/* cada logo mantém proporção e altura óptica do Figma via --w / --h */
.clogo {
  display: block;
  flex: none;
  height: calc(var(--h) * 1rem / 16);
  aspect-ratio: var(--w) / var(--h);
  position: relative;
}

.clogo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* logos compostos por mais de uma peça (Frallonardo, Scaife) */
.clogo--multi > img { position: absolute; object-fit: fill; }

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

/* =========================================================================
   NÚMEROS  (1284 – 1623)
   ========================================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
  padding: 6.125rem 5.5208% 0 4.7396%;  /* 106 e 91 sobre 1920 */
}

.stat__label {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.09375;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2.8125rem;
}

.stat__card {
  position: relative;
  aspect-ratio: 537 / 259;
  border-radius: 2.8125rem;
  background: var(--black);
}

/* borda com gradiente que some — como no render do Figma */
.stat__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
              rgba(255, 255, 255, 0.50) 0%,
              rgba(255, 255, 255, 0.11) 45%,
              rgba(255, 255, 255, 0.07) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

.stat__value {
  position: absolute;
  left: 8.508%;    /* 45,69 / 537 */
  top: 11.583%;    /* 30 / 259 */
  font-size: 6.25rem;
  font-weight: 600;
  line-height: 1.098;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stat__desc {
  position: absolute;
  left: 11.359%;   /* 61 / 537 */
  top: 56.757%;    /* 147 / 259 */
  width: 78%;
  font-size: 1.5rem;
  line-height: 1.38;
}

.stat:nth-child(1) .stat__desc { width: 68.5%; }
.stat:nth-child(3) .stat__desc { width: 59.2%; }

.stat__arrow {
  position: absolute;
  left: 85.847%;   /* 461 / 537 */
  top: 15.444%;    /* 40 / 259 */
  width: 5.773%;   /* 31 / 537 */
  height: auto;
  aspect-ratio: 1;
  display: block;
}

/* =========================================================================
   SOBRE  (1632 – 2651)
   ========================================================================= */
.about {
  position: relative;
  height: 63.6875rem;
  margin-top: 0.5625rem;
  overflow: hidden;
}

.about__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 67.5rem;
}


.about__content {
  position: absolute;
  left: 52.0833%;  /* 1000 / 1920 */
  top: 8.625rem;
  width: 36.198%;  /* 695 / 1920 */
  z-index: 2;
}

.about__title {
  width: 100%;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.09375;
  letter-spacing: -0.02em;
}

.about__text { margin-top: 2.625rem; }

.about__text p {
  /* 44rem (704px) em vez dos 695px do Figma: a Poppins web quebra uma linha
     a mais em 695px, o que empurrava o bloco da citação 26px para baixo */
  width: 44rem;
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
}

.quote {
  margin-top: 3.5rem;
  display: flex;
  gap: 1.4375rem;
  align-items: flex-start;
}

.quote__avatar {
  width: 6.375rem;
  height: 6.375rem;
  margin-top: 0.4375rem;
  flex: none;
}

.quote__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* o bloco de texto precisa poder encolher dentro do flex, senão a citação
   estoura a coluna (min-width padrão de item flex é auto) */
.quote__body { min-width: 0; }

.quote__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.02em;
}

.quote__role {
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.quote__text {
  max-width: 33.875rem;
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.02em;
}

/* =========================================================================
   SOLUÇÕES  (2651 – 3821)
   ========================================================================= */
.services {
  position: relative;
  height: 73.125rem;
  background: var(--black);
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  padding: 0 8.9583%;  /* 172 / 1920 */
}

.services__head {
  display: grid;
  grid-template-columns: 51.75rem 1fr;
  height: 6.625rem;
  padding-top: 3.3125rem;
}

.services__col-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
}

.icon-arrow {
  width: 1.6925rem;
  height: 1.6925rem;
  display: block;
}

.icon-arrow--down { transform: rotate(135deg); }

.services__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 51.75rem 1fr;
  height: 12.9375rem;
  padding-top: 2rem;
}

/* hover: gradiente roxo → preto, sangrando até as bordas da viewport */
.services__row::before {
  content: "";
  position: absolute;
  inset: 0 -10.4%;
  background: var(--grad-service);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: -1;
}

.services__row:hover::before,
.services__row:focus-within::before,
.services__row.is-active::before { opacity: 1; }

.services__name {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.09375;
  letter-spacing: -0.02em;
  transition: transform 0.45s var(--ease-out-soft);
}

.services__row:hover .services__name,
.services__row.is-active .services__name { transform: translateX(1.25rem); }

/* sobre o roxo, o título vira branco sólido */
.services__row:hover .services__name,
.services__row.is-active .services__name {
  background-image: none;
  color: var(--white);
}

.services__list {
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
}

/* =========================================================================
   CASES  (3821 – 6449)  ·  empilhamento no scroll
   ========================================================================= */
.cases { padding: 5.9375rem 6.6667% 0; }  /* 128 / 1920 */

.case-row {
  position: sticky;
  top: var(--stick-top, 6rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.375rem;
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

.case-row + .case-row { margin-top: 2.75rem; }

.case-row:nth-child(1) { --stick-top: 6rem;   z-index: 1; }
.case-row:nth-child(2) { --stick-top: 7.5rem; z-index: 2; }
.case-row:nth-child(3) { --stick-top: 9rem;   z-index: 3; }

.case {
  position: relative;
  /* proporção em vez de altura fixa: com a largura fluida, o card precisa
     acompanhar para não distorcer em telas maiores que 1920 */
  aspect-ratio: 797 / 815;
}

.case__media { width: 100%; height: 100%; }

.case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3.125rem;
  display: block;
}

/* ---- vídeo dentro do case (Deu Zebra) ----------------------------------
   Figma: nó 53:1238 (421,37 x 744,41) em x1376,63 / y3868,23, dentro do card
   53:1187 (797 x 815) em x995 / y3916. O collage é recortado em 646,07px,
   então o wrapper clipa e o vídeo "sobra" para cima, como no design.      */
.case__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* aspect-ratio em vez de height:% — o card tem altura fixa no desktop mas
     altura automática no mobile, e a proporção vale nos dois casos */
  aspect-ratio: 797 / 646.068;
  overflow: hidden;
  border-radius: 3.125rem 3.125rem 0 0;
  pointer-events: none;
  z-index: 2;
}

.case__video-el {
  position: absolute;
  left: 47.885%;             /* (1376,63 − 995) / 797 */
  top: -7.394%;              /* (3868,23 − 3916) / 646,07 */
  width: 52.869%;            /* 421,37 / 797 */
  height: 115.22%;           /* 744,41 / 646,07 */
  object-fit: cover;
  display: block;
  background: #000;
  pointer-events: auto;
}

.case__play {
  position: absolute;
  left: 74.32%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.5rem;
  height: 5.5rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out-soft), background-color 0.3s ease, opacity 0.3s ease;
}

.case__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.65);
}

.case__play svg { width: 2.4rem; height: 2.4rem; margin-left: 0.2rem; }

.case__video[hidden] { display: none; }

/* ---- lightbox do vídeo ---- */
.vbox {
  position: fixed;
  inset: 0;
  /* acima do aviso de cookies (300): o lightbox é modal e precisa ser a
     camada de cima, senão o banner senta em cima do vídeo e dos controles */
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
}

.vbox[hidden] { display: none; }

.vbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: vbox-fade 0.3s ease;
}

.vbox__inner {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 34rem);
  animation: vbox-in 0.4s var(--ease-out-soft);
}

.vbox__video {
  display: block;
  width: 100%;
  max-height: 86vh;
  border-radius: 1.25rem;
  background: #000;
}

.vbox__close {
  position: absolute;
  top: -3.2rem;
  right: 0;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.vbox__close:hover { background: rgba(255, 255, 255, 0.16); }

/* girinho enquanto o arquivo carrega — o pôster já cobre o retângulo, isto
   só avisa que algo está acontecendo em conexão lenta */
.vbox.is-loading .vbox__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: vbox-spin 0.8s linear infinite;
  pointer-events: none;
}

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

@keyframes vbox-fade { from { opacity: 0; } }
@keyframes vbox-in {
  from { opacity: 0; transform: scale(0.94) translateY(1rem); }
}

.case__meta {
  position: absolute;
  left: 0;
  top: 81.2%;                /* ~662 / 815 — um pouco acima dos 672 do Figma
                                para a descrição de 3 linhas não estourar */
  width: 100%;
  padding-left: 6.274%;      /* 50 / 797 */
  padding-right: 4%;
  display: grid;
  grid-template-columns: 32.748% 1fr;  /* 261 / 797 */
}

.case__label {
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.case__value {
  margin-top: 0.6875rem;
  width: 100%;
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* =========================================================================
   CONTATO  (6449 – 7821)
   ========================================================================= */
.cta {
  position: relative;
  height: 85.75rem;
  padding-top: 7.1875rem; /* padding, não margin: evita margin-collapse */
  text-align: center;
  overflow: hidden;
}

.cta__title {
  margin-top: 1.625rem;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.09375;
  letter-spacing: -0.02em;
}

.cta__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 18.375rem;
  height: 67.5rem;
}

.cta__bg { position: absolute; inset: 0; }

.form {
  position: absolute;
  left: 52.5521%;  /* 1009 / 1920 */
  top: 6.25rem;
  width: 40.802%;  /* 783,4 / 1920 */
  text-align: left;
  z-index: 2;
}

.form__row { width: 98.889%; }  /* 774,7 / 783,4 */

.form__row + .form__row { margin-top: 2.325rem; }

.form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.0875rem;
}

.form__row:last-of-type { width: 100%; }

.field {
  display: block; /* remove o gap de baseline do textarea */
  width: 100%;
  height: 5.3175rem;
  padding: 0 1.6875rem;
  border: 1px solid var(--muted);
  border-radius: 1.5625rem;
  background: var(--black);
  color: var(--white);
  font-family: inherit;
  font-weight: 500;
  /* 24px no Figma (nó 61:1347) — o botão é que usa 36px, não os campos */
  font-size: 1.5rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
  transition: border-color 0.25s ease;
}

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

.field:focus { outline: none; border-color: var(--white); }

.field--area {
  height: 16.783rem;
  /* 25,4px do topo até a primeira linha, como no nó 61:1357 */
  padding: 1.5875rem 1.6875rem;
  resize: vertical;
}

.btn-send {
  margin-top: 2.744rem;
  width: 30.416rem;
  height: 6rem;
  border: 2px solid var(--white);
  border-radius: 3.625rem;
  background: var(--black);
  color: var(--white);
  font-family: inherit;
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.38;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-send:disabled { opacity: 0.55; cursor: default; }

.btn-send img { width: 1.8106rem; height: 1.8106rem; display: block; }

.form__status {
  margin-top: 1.25rem;
  min-height: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.38;
  color: var(--muted);
}

.form__status[data-state="ok"]  { color: var(--white); }
.form__status[data-state="err"] { color: #ff6b6b; }

.marquee--footer {
  position: absolute;
  left: 0;
  right: 0;
  top: 54.125rem;
  height: 6.375rem;
  z-index: 2;
}

/* =========================================================================
   RODAPÉ  (7821 – 8385)
   ========================================================================= */
.site-footer {
  position: relative;
  height: 35.25rem;
}

.footer-card {
  position: absolute;
  left: 4.1667%;
  right: 4.1146%;
  top: 0;
  height: 28.375rem;
  border-radius: 4rem;
  background: rgba(44, 44, 44, 0.2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* posições horizontais em % do card (1761 de largura no Figma) */
.footer-logo {
  position: absolute;
  left: 3.748%;    /* 66 / 1761 */
  top: 3.5625rem;
  width: 19.867%;          /* 349,85 / 1761 */
  max-width: 21.8656rem;   /* não passa do tamanho do design: acima de ~2700px
                              o logo alcançava o parágrafo abaixo dele */
  height: auto;
  aspect-ratio: 349.85 / 79;
  display: block;
}

.footer-about {
  position: absolute;
  left: 3.748%;
  top: 11.1875rem;
  width: 27.598%;  /* 486 / 1761 */
  font-size: 1.25rem;
  line-height: 1.64;
  letter-spacing: -0.02em;
}

.footer-social {
  position: absolute;
  left: 3.748%;
  top: 20.75rem;
  display: flex;
  gap: 1rem;
}

.footer-social a {
  display: block;
  width: 2.875rem;
  height: 2.875rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover { opacity: 0.7; transform: translateY(-2px); }

.footer-social img { width: 100%; height: 100%; display: block; }

.footer-nav,
.footer-legal {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* pitch de 56px − 26px de linha */
}

.footer-nav { left: 41.056%; top: 4.1875rem; }   /* 723 / 1761 */
.footer-legal { left: 55.083%; top: 4.1875rem; } /* 970 / 1761 */

.footer-nav a,
.footer-legal a,
.footer-legal__btn {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.0833;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

/* o botão de preferências precisa ler como os links vizinhos */
.footer-legal__btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-nav a:hover,
.footer-legal a:hover,
.footer-legal__btn:hover { opacity: 0.6; }

.btn-send--sm {
  position: absolute;
  left: 78.365%;   /* 1380 / 1761 */
  top: 2.625rem;
  margin-top: 0;
  width: 18.578%;  /* 327,16 / 1761 */
  min-width: 14rem;
  height: 4.546rem;
  font-size: 1.5rem;
  gap: 0.9rem;
}

.btn-send--sm img { width: 1.292rem; height: 1.292rem; }

.footer-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 31.125rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.64;
  letter-spacing: -0.02em;
}

/* =========================================================================
   MOBILE  (< 1080px)
   Não existe versão mobile no Figma. O objetivo aqui é manter a identidade
   e a hierarquia do desktop, adaptando ergonomia (alvos de toque ≥ 44px,
   1 coluna) e performance (sem scroll-listener, só sticky/compositor).
   ========================================================================= */
@media (max-width: 1080px) {
  html { font-size: 16px; }

  body { max-width: none; }

  /* ---- header ---- */
  .site-header {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .nav-pill {
    height: auto;
    padding: 0 10px 0 18px;
    border-radius: 31px;
    background: rgba(14, 14, 14, 0.78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    /* as linhas do flex ficam ancoradas no topo: ao abrir o menu, a pill
       cresce para baixo e o logo continua exatamente no mesmo lugar */
    align-content: flex-start;
  }

  /* altura fixa na primeira linha (logo + botão) — é o que impede o logo
     de "pular" quando o menu abre e a pill passa a ter duas linhas */
  .nav-logo,
  .nav-toggle {
    height: 62px;
    flex: none;
  }

  .nav-logo {
    display: flex;
    align-items: center;
  }

  .nav-logo img { width: 118px; height: 27px; }

  .nav-toggle { display: flex; }

  .nav-menu {
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 14px;
    display: none;
  }

  .nav-menu.is-open { display: flex; }

  .nav-menu a {
    font-size: 18px;
    padding: 13px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* ---- hero ---- */
  .hero {
    /* height:auto anula os 67.5rem do desktop; min-height faz o hero
       ocupar a tela e crescer se o conteúdo precisar.
       O 100vh é fallback: navegador sem svh ignoraria a linha seguinte e o
       hero desabaria na altura do conteúdo. */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
  }

  /* um único bloco centralizado — eyebrow, título, botão e "role para baixo"
     juntos. Antes o scroll-cue era absoluto na base e abria um vão enorme. */
  .hero__inner {
    position: relative;
    flex: 1;
    width: 100%;
    height: auto;
    /* o min-height é o que realmente estica o bloco até a altura da tela;
       sem ele o justify-content:center não tinha espaço para centralizar */
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    /* o padding-bottom reserva a faixa do indicador de rolagem, que fica
       ancorado na base — assim o texto centraliza sem deixar vão embaixo */
    padding: 84px 22px 148px;
  }

  /* o recorte vertical dedicado já tem a proporção de tela de celular
     (499:1080 ≈ 0,462, o mesmo de 390x844), então cobre sem cortar nada */
  .hero__bg { background-image: url("../img/hero-poster-mobile.webp"); }

  /* o texto ocupa proporcionalmente muito mais da tela no celular, então o
     véu precisa cobrir uma faixa maior que no desktop */
  .hero__bg::before {
    background:
      radial-gradient(ellipse 92% 34% at 50% 44%,
                      rgba(0, 0, 0, 0.82) 0%,
                      rgba(0, 0, 0, 0.55) 60%,
                      rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 18%);
  }

  .cta__bg::before {
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.35) 0%,
                rgba(0, 0, 0, 0) 45%);
  }

  .hero__inner .eyebrow {
    margin-top: 0;
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .hero__title {
    font-size: clamp(28px, 7.8vw, 38px);
    margin-top: 14px;
    line-height: 1.16;
    max-width: 15ch;
  }

  .btn-outline {
    margin-top: 26px;
    width: 232px;
    height: 52px;
    font-size: 16px;
    border-radius: 32px;
  }

  /* Centralização por margem automática, não por transform: o [data-reveal]
     escreve `transform: none` ao aparecer, o que zerava um translateX(-50%)
     e jogava o indicador para a direita.

     A distância da base é percentual, não pixel fixo: alguns navegadores de
     celular (e navegadores embutidos, tipo o do Instagram) mostram barras
     que o 100svh não prevê, e um valor fixo deixava o indicador logo abaixo
     da dobra. Em 12% ele fica folgado dentro da primeira tela em qualquer
     altura. */
  .scroll-cue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(12% + env(safe-area-inset-bottom, 0px));
    width: max-content;
    margin: 0 auto;
    gap: 10px;
    padding: 8px;
  }
  .scroll-cue__mouse { width: 24px; height: 32px; }
  .scroll-cue__wheel { left: 7.2px; top: 8.7px; width: 9.6px; height: 14.5px; }
  .scroll-cue__label { font-size: 12px; letter-spacing: 0.14em; }

  /* ---- marcas ---- */
  .clients { height: auto; padding: 54px 0 10px; }

  .clients__label {
    position: static;
    width: auto;
    font-size: 13px;
    text-align: center;
    padding: 0 24px 18px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  .clients__label br { display: none; }

  .marquee {
    position: static;
    height: 52px;
    width: 100%;
    /* esmaece as pontas para o corte não parecer defeito */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .marquee__group { gap: 30px; padding-right: 30px; }

  .clogo { height: calc(var(--h) * 0.48px); }

  /* ---- números ---- */
  .stats {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 54px 22px 0;
  }

  .stat__label {
    font-size: 13px;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
  }

  .stat__card {
    aspect-ratio: auto;
    height: auto;
    border-radius: 26px;
    padding: 24px 22px 26px;
  }

  .stat__card::before {
    background: linear-gradient(150deg,
                rgba(255, 255, 255, 0.38) 0%,
                rgba(255, 255, 255, 0.10) 50%,
                rgba(255, 255, 255, 0.06) 100%);
  }

  .stat__value {
    position: static;
    font-size: clamp(46px, 13vw, 62px);
    line-height: 1.05;
    margin-bottom: 10px;
    /* reserva a faixa da seta no canto superior direito */
    padding-right: 52px;
  }

  .stat__desc,
  .stat:nth-child(1) .stat__desc,
  .stat:nth-child(3) .stat__desc {
    position: static;
    width: 84%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
  }

  .stat__arrow {
    left: auto;
    right: 22px;
    top: 24px;
    width: 22px;
    height: 22px;
    aspect-ratio: auto;
  }

  /* ---- sobre ---- */
  .about { height: auto; margin-top: 0; padding: 0 22px 58px; }

  /* Enquadramento pelo CONTEÚDO, não pelo contêiner.
     O vídeo de celular já é um recorte de 900x840 centrado no nó roxo
     (centróide de luz medido em x 25,6% / y 45,1% do quadro original), e a
     faixa herda essa mesma proporção — então o assunto fica no meio da tela
     e nada é cortado. */
  .about__bg {
    position: relative;
    height: auto;
    aspect-ratio: 900 / 840;
    max-height: 400px;
    margin: 54px -22px 0;
    width: auto;
    background-image: url("../img/sobre-poster-mobile.webp");
  }

  .about__bg::after { box-shadow: inset 0 -90px 55px -35px var(--black); }

  .about__content { position: static; width: 100%; margin-top: 4px; }

  .about__title {
    width: 100%;
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.18;
  }

  .about__text { margin-top: 18px; }

  /* o desktop fixa 44rem para controlar a quebra; no mobile isso vazava */
  .about__text p {
    width: 100%;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.86);
  }

  .about__text p + p { margin-top: 14px; }

  .quote {
    margin-top: 30px;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(44, 44, 44, 0.28);
  }

  .quote__avatar { width: 52px; height: 52px; margin-top: 0; }

  .quote__name { font-size: 16px; }
  .quote__role { font-size: 13px; }
  .quote__text { max-width: none; font-size: 14px; margin-top: 8px; }

  /* ---- soluções ---- */
  .services { height: auto; padding: 0 22px 34px; }

  .services__head {
    grid-template-columns: 1fr;
    height: auto;
    padding: 30px 0 6px;
  }

  .services__head .services__col-title:last-child { display: none; }

  .services__col-title {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .icon-arrow { width: 13px; height: 13px; }

  .services__row {
    grid-template-columns: 1fr;
    height: auto;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .services__row::before { inset: 0 -22px; }

  /* no touch não há hover: a linha acende ao entrar no centro da tela */
  .services__row:hover .services__name { transform: none; }

  .services__row.is-active .services__name { transform: translateX(6px); }

  .services__name {
    font-size: clamp(26px, 7.4vw, 34px);
    margin-bottom: 10px;
  }

  .services__list { font-size: 14px; color: rgba(255, 255, 255, 0.86); }

  /* ---- cases: empilhamento em 1 coluna, só com sticky (sem JS) ---- */
  .cases { padding: 54px 22px 0; }

  .case-row {
    display: contents;
    position: static;
    transform: none !important;
    opacity: 1 !important;
  }

  .case-row + .case-row { margin-top: 0; }

  /* mesma estrutura do desktop: o card mantém a proporção da arte e o bloco
     Marca/Descrição fica POR CIMA da faixa cinza da imagem, não solto no
     preto embaixo dela */
  .case {
    position: sticky;
    aspect-ratio: 797 / 815;
    height: auto;
    margin-bottom: 26px;
    border-radius: 26px;
    background: var(--black);
    box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.95);
  }

  .case-row:nth-child(1) .case:nth-child(1) { top: 84px;  z-index: 1; }
  .case-row:nth-child(1) .case:nth-child(2) { top: 92px;  z-index: 2; }
  .case-row:nth-child(2) .case:nth-child(1) { top: 100px; z-index: 3; }
  .case-row:nth-child(2) .case:nth-child(2) { top: 108px; z-index: 4; }
  .case-row:nth-child(3) .case:nth-child(1) { top: 116px; z-index: 5; }
  .case-row:nth-child(3) .case:nth-child(2) { top: 124px; z-index: 6; margin-bottom: 0; }

  .case__media { height: 100%; }

  .case__media img { height: 100%; object-fit: cover; border-radius: 26px; }

  .case__video { border-radius: 26px 26px 0 0; }

  .case__play { width: 56px; height: 56px; border-width: 1.5px; }

  .case__play svg { width: 22px; height: 22px; }

  .case__meta {
    position: absolute;
    /* 79.6% ≈ onde a faixa cinza começa (79.27%); as descrições de 3 linhas
       precisam de toda a altura da faixa para não estourar o card */
    top: 79.6%;
    padding-left: 6.274%;
    padding-right: 5%;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
    width: 100%;
  }

  .case__label { font-size: clamp(10px, 2.9vw, 12px); }

  .case__value {
    width: 100%;
    font-size: clamp(11px, 3.1vw, 14px);
    line-height: 1.25;
    margin-top: 2px;
  }

  /* ---- contato ---- */
  .cta { height: auto; padding-top: 62px; overflow: visible; }

  .cta .eyebrow { font-size: 12px; letter-spacing: 0.16em; }

  .cta__title {
    font-size: clamp(25px, 7vw, 32px);
    margin-top: 12px;
    padding: 0 22px;
    line-height: 1.18;
  }

  .cta__stage {
    position: static;
    height: auto;
    margin-top: 26px;
    padding-bottom: 20px;
  }

  /* mesma regra da faixa do "sobre": o recorte de celular (1024x576) já está
     centrado na seta, e a faixa herda a proporção do recorte */
  .cta__bg {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 300px;
    background-image: url("../img/form-poster-mobile.webp");
  }

  .form { position: static; width: 100%; padding: 0 22px; margin-top: 26px; }

  .form__row,
  .form__row:last-of-type { width: 100%; }

  .form__row + .form__row { margin-top: 12px; }

  .form__row--split { grid-template-columns: 1fr; gap: 12px; }

  .field {
    height: 54px;
    /* 16px evita o zoom automático do iOS ao focar o campo */
    font-size: 16px;
    border-radius: 16px;
    padding: 0 16px;
  }

  .field--area { height: 140px; padding: 15px 16px; }

  .btn-send {
    margin-top: 18px;
    width: 100%;
    height: 56px;
    font-size: 17px;
    border-radius: 28px;
    gap: 10px;
  }

  .btn-send img { width: 16px; height: 16px; }

  .form__status { font-size: 13px; }

  .marquee--footer { position: static; height: 52px; margin-top: 42px; }

  /* ---- rodapé ---- */
  .site-footer { height: auto; padding: 44px 14px 26px; }

  .footer-card {
    position: static;
    height: auto;
    border-radius: 28px;
    padding: 30px 22px 34px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .footer-logo { position: static; width: 178px; height: 40px; aspect-ratio: auto; }

  .footer-about {
    position: static;
    width: 100%;
    font-size: 14px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.82);
  }

  .footer-social { position: static; margin-top: 20px; gap: 12px; }

  .footer-social a { width: 42px; height: 42px; }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .footer-nav,
  .footer-legal { position: static; gap: 2px; }

  /* padding vertical garante alvo de toque de 44px */
  .footer-nav a,
  .footer-legal a,
  .footer-legal__btn {
    font-size: 15px;
    white-space: normal;
    padding: 11px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* relative (não static) porque as camadas de hover do buttons.css se
     posicionam contra o botão; e o left/top do desktop precisam ser zerados,
     senão viram deslocamento relativo e jogam o botão para fora da tela */
  .btn-send--sm {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 54px;
    font-size: 16px;
  }

  .btn-send--sm img { width: 14px; height: 14px; }

  .footer-copy {
    position: static;
    margin-top: 24px;
    font-size: 12px;
    color: var(--muted);
  }
}

/* telas bem estreitas */
@media (max-width: 380px) {
  .footer-links { grid-template-columns: 1fr; }
  .stat__value { font-size: 44px; }
}

/* =========================================================================
   Acessibilidade — respeita "reduzir movimento"
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .marquee__track,
  .scroll-cue,
  .scroll-cue__wheel { animation: none; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }

  .case-row { transform: none !important; opacity: 1 !important; }

  *, *::before, *::after { transition-duration: 0.01ms !important; }
}