/* Fontes licenciadas não disponíveis; Montserrat utilizada como padrão */

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-500.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-800.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-400-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* color/* */
  --c-light-100: #fcfcfc;
  --c-light-200: #f0f0f0;
  --c-light-400: #c7c7c7;
  --c-light-500: #686663;
  --c-light-600: #545350;
  --c-dark:      #222220;
  --c-gray:      #4a4846;
  --c-yellow:    #eba200;
  --c-online:    #25d366;
  --c-online-glow: rgba(37, 211, 102, 0.32);
  --c-page:      #f7f7f7;

  /* font/family/* — Montserrat utilizada como fonte principal */
  --font-base:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* space/* e padding/* */
  --p-3xs: 0.125rem;  --p-2xs: 0.25rem;  --p-xs: 0.5rem;   --p-s: 0.75rem;
  --p-l:  1.25rem;  --p-xl: 1.5rem;  --p-2xl: 2rem;
  --s-12: 0.75rem;  --s-24: 1.5rem;  --s-32: 2rem;  --s-40: 2.5rem;
  --s-48: 3rem;  --s-80: 5rem;  --s-104: 6.5rem; --s-120: 7.5rem;

  /* Ritmo vertical editorial: compacto e consistente entre seções. */
  --section-space: 4rem;
  --section-space-mobile: 3rem;

  /* radial/component/* */
  --r-s: 0.5rem; --r-m: 1rem; --r-l: 1.25rem; --r-2xl: 6.25rem;

  /* grid */
  --gutter-left: 10.75rem;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: clamp(16px, 1.1111vw, 21.3333px);
}

body {
  font-family: var(--font-base);
  background: var(--c-page);
  color: var(--c-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Skip link acessível */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1.5rem;
  z-index: 99999;
  padding: 0.75rem 1.25rem;
  background-color: var(--c-dark);
  color: var(--c-light-100);
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-s, 0.5rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--c-light-400);
  outline: 2px solid var(--c-light-100);
  outline-offset: 2px;
  transition: top 200ms ease;
  pointer-events: none;
  opacity: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1.5rem;
  opacity: 1;
  pointer-events: auto;
}

#main-content:focus {
  outline: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.page {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--s-24);
}

/* --------------------------------------------------------------------------
   Botões  [4031:541 / 4003:827]
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: var(--p-s) 1.25rem;
  border-radius: var(--r-2xl);
  border: 0;
  font-family: var(--font-base);
  font-size: 0.75rem;
  line-height: 1.0rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: padding 300ms ease-out, background-color 300ms ease-out, color 300ms ease-out;
}
.btn:focus-visible,
.footer-nav a:focus-visible,
.slider-btn:focus-visible,
.team-pill:focus-visible {
  outline: 2px solid var(--c-dark);
  outline-offset: 2px;
}
.btn--dark:focus-visible,
.btn--yellow:focus-visible,
.cta-card .btn:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 2px;
}
.btn:not(.btn--text):hover {
  padding-left: 2.03125rem;
  padding-right: 2.03125rem;
}
.btn--light:hover,
.btn--dark:hover,
.btn--yellow:hover {
  background-color: #222220;
  color: var(--c-light-100);
}

.btn--light { background: var(--c-light-100); color: var(--c-dark); }
.btn--dark  { background: var(--c-gray);      color: var(--c-light-100); }
.btn--yellow{ background: var(--c-yellow);    color: var(--c-light-100); }

.btn--ghost-light {
  background: transparent;
  color: var(--c-light-100);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.btn--text {
  background: transparent;
  color: var(--c-dark);
  font-weight: 600;
  gap: var(--p-l);
  padding: var(--p-s) 0;
}
.btn-icon { width: 1.25rem; height: 0.65625rem; }

/* --------------------------------------------------------------------------
   Badge de seção  [4003:817]  — linha acima, label abaixo
   -------------------------------------------------------------------------- */
.badge {
  display: flex;
  flex-direction: column;
  gap: var(--p-xl);
  width: auto;
  min-width: max-content;
  flex-shrink: 0;
}
.badge-line {
  display: block;
  width: 3.125rem;
  height: 1px;
  background: var(--c-yellow);
  flex-shrink: 0;
}
.badge-label {
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--c-dark);
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* --------------------------------------------------------------------------
   1. HERO CARD  [4031:644]
   -------------------------------------------------------------------------- */
.hero-card {
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--c-light-100);
}

/* Bloco de mídia de 884px — no Figma é um vídeo/imagem de marca.
   Enquanto o arquivo não entra, reproduzimos o gradiente exato do design. */
.hero-media {
  position: relative;
  height: 55.25rem;
  padding: var(--p-2xl) var(--s-80);
  background: linear-gradient(180deg, #d5d0c3 0%, #e5dfd0 9%, #f6f0df 19%, #f8f2e1 30%, #f8f2e1 100%);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

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

/* Gradiente de segurança para legibilidade do menu sobre frames claros do vídeo */
.hero-media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.header-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--p-l) 0;
}

/* Blur suave decorativo no Hero: dissolve gradualmente sem borda retangular rígida */
.hero-media .header-container::before {
  content: '';
  position: absolute;
  top: calc(var(--p-2xl) * -1);
  left: calc(var(--s-80) * -1);
  right: calc(var(--s-80) * -1);
  bottom: -4.5rem;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 860px) {
  .hero-media .header-container::before {
    left: calc(var(--s-24) * -1);
    right: calc(var(--s-24) * -1);
    top: calc(var(--p-2xl) * -1);
    bottom: -3.5rem;
  }
}

/* Menu persistente / auto-hide */
.site-header--fixed,
.site-header--auto-hide {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--c-page);
  padding: var(--p-xs) 0;
  z-index: 100;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 340ms ease,
              box-shadow 380ms ease;
  will-change: transform, opacity;
}

.site-header--fixed.is-visible,
.site-header--auto-hide.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.site-header--fixed .header-container,
.site-header--auto-hide .header-container {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--p-xs) clamp(var(--s-24), calc(50vw - 33.5rem), calc(var(--s-24) + var(--s-80)));
}

.site-header--fixed .header-container::before,
.site-header--auto-hide .header-container::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header--fixed,
  .site-header--auto-hide {
    transition: none;
  }
}

@media (max-width: 860px) {
  .site-header--fixed,
  .site-header--auto-hide {
    padding: var(--p-2xs) 0;
  }
  .site-header--fixed .header-container,
  .site-header--auto-hide .header-container {
    padding: var(--p-2xs) var(--s-12);
  }
  .site-header--fixed .nav--sticky.is-open,
  .site-header--auto-hide .nav--sticky.is-open {
    background: var(--c-page);
    border-bottom: 1px solid var(--c-light-200);
    top: 100%;
  }
}

.logo {
  font-size: 1.25rem;
  line-height: 2rem;
  letter-spacing: 0.0625rem;
  font-weight: 400;
  color: var(--c-dark);
}
.logo b { font-weight: 800; }
.logo--light { color: var(--c-light-100); }
.logo-img {
  display: block;
  width: 7.5rem;
  height: auto;
}
.logo--light .logo-img { filter: brightness(0) invert(1); }

.floating-contact {
  position: fixed;
  right: var(--s-24);
  bottom: 20px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  width: auto;
  min-height: 2.5rem;
  padding: 0.5625rem 1.125rem;
  box-sizing: border-box;
  border-radius: 6.25rem;
  background: var(--c-dark);
  color: var(--c-light-100);
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
@media (max-width: 540px) {
  .floating-contact {
    bottom: 12px;
    right: 12px;
  }
}
.floating-contact:hover,
.floating-contact:focus-visible {
  background: #ffffff;
  color: var(--c-dark);
  border-color: #e0e0e0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.floating-contact:focus-visible {
  outline: 2px solid var(--c-dark);
  outline-offset: 0.1875rem;
}
.floating-contact__status {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-online);
  animation: online-pulse 1.8s ease-in-out infinite;
}
.floating-contact__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  line-height: 1;
}
.floating-contact__text-default {
  display: inline-block;
  opacity: 1;
  transition: opacity 150ms ease;
}
.floating-contact__text-hover {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1.5px solid var(--c-dark);
}
.floating-contact:hover .floating-contact__text-default,
.floating-contact:focus-visible .floating-contact__text-default {
  display: none;
}
.floating-contact:hover .floating-contact__text-hover,
.floating-contact:focus-visible .floating-contact__text-hover {
  display: inline-block;
  animation: typing-contact 0.35s steps(16, end) forwards, blink-cursor 0.5s step-end infinite;
}
@keyframes typing-contact {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink-cursor {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--c-dark); }
}
@keyframes online-pulse {
  0%, 100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 var(--c-online-glow);
    opacity: 0.88;
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 0.3125rem transparent;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-contact__status { animation: none; }
  .floating-contact:hover .floating-contact__text-hover,
  .floating-contact:focus-visible .floating-contact__text-hover {
    animation: none;
    border-right: none;
    width: auto;
  }
}


.nav { display: flex; align-items: center; gap: var(--s-40); }
.nav-contact-mobile { display: none; }
.nav a {
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--c-light-100);
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-2xl);
  opacity: 0.7;
  transition: color 300ms ease-out, background-color 300ms ease-out, opacity 300ms ease-out;
}
.nav a.is-active {
  opacity: 1;
}
.nav a:hover {
  font-weight: 600;
}
.nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.header-actions { display: flex; gap: var(--p-2xs); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  z-index: 120;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 1.375rem;
  height: 2px;
  margin: 0.25rem auto;
  background: var(--c-light-100);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease,
              background-color 200ms ease;
  transform-origin: center;
}
.nav-toggle--dark span {
  background: var(--c-dark);
}

/* Animação do botão hambúrguer para X */
.nav-toggle.is-open span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.is-open span:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Porque existimos  [4003:808] */
.why {
  background: var(--c-light-100);
  padding: var(--section-space) var(--s-80);
  display: flex;
  flex-direction: column;
  gap: var(--p-l);
}
.why-team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 2.95 / 1;
  overflow: hidden;
  border-radius: var(--r-l);
}
.why-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.why-inner { display: flex; flex-direction: column; gap: var(--p-l); }

.why-content {
  display: flex;
  gap: var(--p-2xl);
  align-items: stretch;
}
.why-title {
  flex: 1 0 0;
  min-width: 0;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 500;
  text-align: left;
  text-wrap: balance;
  color: var(--c-dark);
}
.why-text {
  flex: 1 0 0;
  min-width: 0;
  align-self: flex-end;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  text-align: left;
  text-wrap: pretty;
  color: var(--c-dark);
}

.why-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--p-l);
}

/* --------------------------------------------------------------------------
   2. PARA QUÊ  [4003:833]
   -------------------------------------------------------------------------- */
.para-que {
  position: relative;
  min-height: 43.75rem;
  padding: var(--section-space) var(--s-80);
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}
.para-que-title {
  position: absolute;
  top: 50%;
  left: var(--s-80);
  max-width: 55.875rem;
  margin: 0;
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 500;
  text-align: left;
  transform: translateY(-50%);
  color: var(--c-dark);
}
/* selo giratório  [4050:4148] */
.seal {
  position: absolute;
  left: 63.625rem;
  top: 20.625rem;
  width: 6.25rem;
  height: 6.1875rem;
  animation: seal-spin 18s linear infinite;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal { animation: none; } }

/* --------------------------------------------------------------------------
   3. CASES  [4031:643]
   -------------------------------------------------------------------------- */
.cases { padding: 0; }
.cases-header { padding: 0 var(--s-80); height: 1.875rem; }

.cases-grid {
  margin-top: var(--r-m);          /* 46 - 30 */
  padding: var(--section-space) var(--s-80);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cases-row,
.cases-row--full,
.cases-row--compact {
  display: flex;
  gap: 0.625rem;
}
.cases-row,
.cases-row--full {
  height: 53.25rem;
}
.cases-row--compact {
  height: auto;
}
.cases-row--compact > .case--h {
  flex: 1 1 0;
}
.cases-row--compact > .case--w {
  width: 100%;
  height: 26.3125rem;
}
.cases-col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 47.625rem;
  flex-shrink: 0;
}

.case {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.case-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: var(--c-light-100);
}
.case-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-yellow);
  border-radius: var(--r-l);
}
.case--soon {
  cursor: default;
}
.case--h { height: 26.3125rem; }
.case--v { flex: 1 0 0; min-width: 0; height: 100%; }
.case--catalog { aspect-ratio: 16 / 10; min-width: 0; }

/* Home: véu de contraste somente durante hover ou foco por teclado. */
.cases-grid .case-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--c-dark);
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.cases-grid .case:hover .case-link::after,
.cases-grid .case:focus-within .case-link::after {
  opacity: 0.2;
}
.cases-grid .case-content {
  z-index: 2;
}

/* Catálogo: imagem limpa no repouso; conteúdo e contraste surgem na interação. */
.case--catalog .case-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--c-dark);
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.case--catalog:hover .case-link::after,
.case--catalog:focus-within .case-link::after {
  opacity: 0.2;
}
.case--catalog .case-content {
  z-index: 2;
  opacity: 0;
  padding: 1.25rem;
  transition: opacity 300ms ease-out;
}
.case--catalog .case-title {
  font-size: 1.375rem;
  line-height: 1.75rem;
}
.case--catalog .case-tag {
  padding: 0.3125rem 0.5rem;
  font-size: 0.5rem;
  line-height: 0.625rem;
}
.case--catalog .case-desc {
  display: -webkit-box;
  font-size: 0.6875rem;
  line-height: 1rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
}
.case--catalog:hover .case-desc,
.case--catalog:focus-within .case-desc {
  max-height: 4rem;
  margin-top: 0.625rem;
}
.case--catalog .case-arrow {
  font-size: 1rem;
}
.case--catalog:hover .case-arrow,
.case--catalog:focus-within .case-arrow {
  margin-top: 0.375rem;
}
.case--catalog:hover .case-content,
.case--catalog:focus-within .case-content {
  opacity: 1;
}

.case-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 300ms ease-out;
}
.case:hover .case-img,
.case:focus-within .case-img {
  filter: blur(25px);
}

.case-content {
  position: relative;
  padding: var(--p-2xl);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.case-tag {
  align-self: flex-start;
  border: 1px solid var(--c-light-100);
  border-radius: var(--r-2xl);
  padding: var(--p-xs);
  font-size: 0.625rem;
  line-height: 0.75rem;
  font-weight: 700;
  color: var(--c-light-100);
}
.case-info {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.case-title {
  font-family: var(--font-base);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 600;
  color: var(--c-light-100);
}

/* Descrição e seta — empurram o título para cima via fluxo natural */
.case-desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-light-100);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: opacity 300ms ease-out, max-height 300ms ease-out, margin-top 300ms ease-out;
}
.case:hover .case-desc,
.case:focus-within .case-desc {
  max-height: 8rem;
  opacity: 1;
  margin-top: 0.875rem; /* ~14px */
}

.case-arrow {
  font-size: 1.25rem;
  color: var(--c-light-100);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  align-self: flex-start;
  line-height: 1;
  margin-top: 0;
  transition: opacity 300ms ease-out, max-height 300ms ease-out, margin-top 300ms ease-out;
}
.case:hover .case-arrow,
.case:focus-within .case-arrow {
  max-height: 2rem;
  opacity: 1;
  margin-top: 0.625rem; /* ~10px */
}

/* Touch / sem hover: desc e seta sempre visíveis */
@media (hover: none) {
  .case-desc {
    max-height: none;
    opacity: 1;
    margin-top: 0.875rem;
  }
  .case-arrow {
    max-height: none;
    opacity: 1;
    margin-top: 0.625rem;
  }
}

.cases-footer {
  margin-top: var(--r-m);
  height: 4rem;
  padding: 0 var(--s-80);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   4. SOLUÇÕES  [4003:871]
   -------------------------------------------------------------------------- */
.solucoes { padding: var(--section-space) var(--s-80); }

.sol-head { display: flex; height: 5rem; margin-bottom: var(--p-l); }
.sol-head .badge { width: var(--gutter-left); }
.sol-heading {
  max-width: 38.75rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 500;
}

.sol-item {
  display: grid;
  grid-template-columns: var(--gutter-left) 33.75rem 1fr;
  gap: 0;
  min-height: 12.6875rem;
  padding: var(--s-32) 0;
  margin-bottom: var(--p-l);
  border-top: 1px solid var(--c-light-200);
}
.sol-item + .sol-item + .sol-item { min-height: 15rem; }
.sol-num { font-size: 0.75rem; line-height: 1.25rem; color: var(--c-dark); }
.sol-text { padding-right: var(--s-40); }
.sol-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  margin-bottom: var(--p-s);
}
.sol-desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: justify;
  color: var(--c-dark);
}

.sol-chips { display: flex; flex-wrap: wrap; gap: var(--p-xs); align-content: flex-start; }
.sol-chips li {
  border: 1px solid var(--c-light-200);
  border-radius: var(--r-2xl);
  padding: var(--p-xs) var(--p-s);
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--c-gray);
}

@media (hover: hover) {
  .sol-chips li {
    transition: opacity 200ms ease-out, background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out;
  }
  .sol-chips:hover li {
    opacity: 0.4;
  }
  .sol-chips li:hover {
    opacity: 1;
    background-color: var(--c-dark);
    border-color: var(--c-dark);
    color: var(--c-light-100);
  }
}

.sol-footer { display: flex; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   5. PARA QUEM FAZEMOS  [4003:1052]
   -------------------------------------------------------------------------- */
.para-quem { padding: var(--section-space) var(--s-80); }

.pq-head { display: flex; height: 5rem; margin-bottom: var(--s-48); }
.pq-head .badge { width: var(--gutter-left); }
.pq-heading {
  max-width: 38.75rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 500;
}

.pq-cards { display: flex; gap: var(--p-2xs); padding-left: var(--gutter-left); }
.pq-card {
  width: 16.40625rem;
  height: 21.1875rem;
  border: 1px solid var(--c-light-200);
  border-radius: var(--r-l);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  background: var(--c-light-100);
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}
.pq-card:hover {
  border-color: transparent;
  background-color: var(--c-dark);
}
.pq-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
  margin-bottom: 2.25rem;
  transition: filter 300ms ease-out;
}
.pq-card:hover .pq-icon {
  filter: brightness(0) invert(1);
}
.pq-title {
  display: flex;
  align-items: flex-end;
  height: 4.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--c-dark);
  margin-bottom: 1.25rem;
  transition: color 300ms ease-out;
}
.pq-card:hover .pq-title {
  color: var(--c-light-100);
}
.pq-rule {
  display: block;
  width: 5.125rem;
  height: 1px;
  background: var(--c-light-400);
  margin-bottom: 1.25rem;
  transition: background-color 300ms ease-out;
}
.pq-card:hover .pq-rule {
  background-color: var(--c-light-100);
}
.pq-desc {
  margin-top: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-dark);
  transition: color 300ms ease-out;
}
.pq-card:hover .pq-desc {
  color: var(--c-light-100);
}

/* --------------------------------------------------------------------------
   6. DEPOIMENTOS  [4031:634]
   -------------------------------------------------------------------------- */
.depoimentos {
  position: relative;
  padding: var(--section-space) 0;
  overflow: hidden;
}
/* Desfocagem progressiva da borda direita  [4031:634].
   Duas camadas empilhadas com raios diferentes: uma só camada mascarada faz
   crossfade entre nítido e borrado e deixa fantasma duplicado. Empilhando,
   o borrão cresce de verdade ao longo da faixa. */
.dep-viewport::before,
.dep-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  /* A banda avança 4rem ALÉM da borda da seção e é recortada pelo
     overflow:hidden de .depoimentos. Sem isso, a borda do backdrop-filter
     cai exatamente na linha visível: o kernel não tem o que amostrar fora
     do elemento, clampeia, e sobra um risco vertical. */
  right: -4rem;
  width: 26rem;
  pointer-events: none;
  z-index: 10;
  background: transparent;
  transition: opacity 300ms ease;
}

.dep-viewport.is-at-end::before,
.dep-viewport.is-at-end::after {
  opacity: 0;
}

.dep-viewport::before {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}

.dep-viewport::after {
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  -webkit-mask-image: linear-gradient(to right, transparent 25%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.8) 63%, #000 76%);
  mask-image: linear-gradient(to right, transparent 25%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.8) 63%, #000 76%);
}
@media (max-width: 860px) {
  .dep-viewport::before, .dep-viewport::after { display: none; }
}

/* O viewport é o recorte do carrossel: a desfocagem progressiva da borda
   direita vive AQUI, não na seção — senão cobre título, botão e o fundo
   abaixo dos cards, que é o que estava manchando. */
.dep-viewport { position: relative; }
.dep-head { display: flex; padding: 0 var(--s-80); }
.dep-head .badge { width: var(--gutter-left); }
.dep-heading {
  max-width: 38.75rem;
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 500;
}

.dep-slider-nav {
  display: flex;
  gap: var(--p-xs);
  padding: var(--s-24) var(--s-80) 0;
  margin-left: var(--gutter-left);
}
.slider-btn {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--c-light-400);
  background: transparent;
  color: var(--c-gray);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.slider-btn:not(:disabled):hover { background: var(--c-dark); color: var(--c-light-100); border-color: var(--c-dark); }
.slider-btn:disabled { opacity: 0.35; cursor: default; }

.dep-track {
  display: flex;
  align-items: stretch;
  gap: var(--p-l);
  margin-top: 1rem;
  padding: 1.5rem var(--s-80);
  padding-left: calc(var(--s-80) + var(--gutter-left));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.dep-track.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.dep-track.is-dragging * {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.dep-track::-webkit-scrollbar { display: none; }

.dep-card {
  flex-shrink: 0;
  min-height: 24.375rem;
  height: auto;
  border: 1px solid var(--c-light-200);
  border-radius: var(--r-l);
  padding: var(--p-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--p-xs);
  background: var(--c-light-100);
}
.dep-card--s { width: 23.125rem; }
.dep-card--l { width: 28.75rem; }

.dep-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  min-height: 4rem;
  flex-shrink: 0;
}
.dep-quote {
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 7.5rem;
  flex: 1 0 auto;
}

.dep-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0 0;
  margin-top: auto;
  flex-shrink: 0;
}
.avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-light-200);
}
.dep-person { display: flex; flex-direction: column; gap: var(--p-3xs); }
.dep-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.dep-detail { font-size: 0.75rem; line-height: 1rem; color: var(--c-light-500); }

.dep-footer {
  position: relative;
  z-index: 11;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-24);
  padding: 0 var(--s-80);
}

/* --------------------------------------------------------------------------
   7. QUEM SOMOS  [4003:1705]
   -------------------------------------------------------------------------- */
.quem-somos { padding: var(--section-space) 0; }

.qs-head { display: flex; padding: 0 var(--s-80); }
.qs-head .badge { width: var(--gutter-left); }
.qs-copy { display: flex; flex-direction: column; gap: var(--p-l); }
.qs-heading { max-width: 38.75rem; font-size: 2.5rem; line-height: 3rem; font-weight: 500; }
.qs-text { font-size: 0.875rem; line-height: 1.25rem; max-width: 66.25rem; }

.qs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-32);
  min-height: 11.5rem;
  margin-top: var(--s-32);
  padding: 0 var(--s-80);
  padding-left: calc(var(--s-80) + var(--gutter-left));
}
.qs-num {
  font-family: var(--font-base);
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 500;
}
.qs-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; margin-top: var(--p-xs); }
.qs-desc { font-size: 0.75rem; line-height: 1rem; color: var(--c-light-600); margin-top: var(--p-xs); }

/* faixa de marcas  [4050:4286] */
.brands {
  margin-top: 4.5rem;
  height: 3.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brands-track {
  display: flex;
  align-items: center;
  gap: 6.5rem;
  width: max-content;
  animation: brands-scroll 150s linear infinite;
}
.brands.is-slow .brands-track { animation-duration: 680s; }
.brands-track img {
  flex: 0 0 auto;
  width: 7.5rem;
  height: 3.21875rem;
  object-fit: contain;
  opacity: .65;
}
@keyframes brands-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brands-track { animation: none; } }

/* --------------------------------------------------------------------------
   8. FRASE + TIME  [4043:3873]
   -------------------------------------------------------------------------- */
.frase-team { padding: 0; }

.frase-team-box {
  background: var(--c-light-100);
  border-radius: var(--r-l);
  min-height: 20.25rem;               /* Frase: 324px  [4043:2673] */
  padding: 3.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.frase {
  max-width: 78.625rem;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.frase p {
  font-size: 1.25rem;
  line-height: 2rem;
  font-style: italic;
  text-align: center;
  color: var(--c-dark);
}
.frase cite {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: normal;
  color: var(--c-gray);
}

/* Team  [4031:1619] — a pílula ABRAÇA o conteúdo. Nunca fixar largura:
   o nome define o tamanho, e o cargo (oculto no repouso) reabre no hover.
   As larguras de --pill-w/--pill-w-hover são medidas em tempo de execução
   pelo script.js a partir do DOM real. Se o JS falhar, cai em `auto` e
   continua correto — só perde a suavidade da transição. */
/* O time NÃO fica dentro do card da frase: no Figma o Team começa em y=300
   e o card termina em 324, ou seja, monta 24px sobre a borda de baixo. */
.team {
  position: relative;
  z-index: 1;
  margin-top: -1.5rem;                /* 24px de sobreposição */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 0.75rem;                       /* padding/s 12px */
  width: 100%;
}

.team-pill {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.625rem;                      /* 10px */
  padding: 0.5rem 0.625rem;           /* py 8px / px 10px */
  background: #ffffff;
  border-radius: var(--r-2xl);        /* 100px */
  width: var(--pill-w, auto);
  transition: width 300ms ease-out, background-color 300ms ease-out;
}

.team-pill:hover,
.team-pill:focus-visible { width: var(--pill-w-hover, auto); }

.team-pill .avatar {
  width: 2.4375rem;                   /* 39px */
  height: 2.4375rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.team-pill span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.125rem;                      /* 2px */
  padding-right: 0.5rem;              /* 8px */
  white-space: nowrap;
  background: transparent;
}

.team-pill b {
  font-size: 0.75rem;                 /* link/M 12 */
  line-height: 1rem;                  /* 16 */
  font-weight: 400;
  color: var(--c-gray);
  background: transparent;
}

.team-pill i {
  display: block;
  font-size: 0.625rem;                /* link/S 10 */
  line-height: 0.75rem;               /* 12 */
  font-style: normal;
  color: var(--c-light-500);
  background: transparent;
  white-space: nowrap;
  /* width:0 é essencial: com overflow oculto o texto ainda contribui para a
     largura máxima do pai, e a pílula já nasceria do tamanho do hover. */
  width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out, opacity 300ms ease-out;
}

.team-pill:hover i,
.team-pill:focus-visible i,
.team-pill.is-measuring i {
  width: auto;
  max-height: 0.75rem;
  opacity: 1;
}

/* estado transitório usado só pela medição em script.js */
.team-pill.is-measuring { width: auto; transition: none; }
.team-pill.is-measuring i { max-height: 0.75rem; opacity: 1; transition: none; }

.team-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* sem largura fixa: abraça o texto, padding 12/20 do nó 4031:1619 */
  height: 3.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-2xl);
  box-sizing: border-box;
  background: var(--c-gray);
  color: var(--c-light-100);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: background-color 300ms ease-out;
}
.team-cta:hover {
  background-color: var(--c-dark);
  width: 12.1875rem;
  padding: 0 2.03125rem;
}
.team-cta:focus-visible {
  background-color: var(--c-dark);
  width: 12.1875rem;
  padding: 0 2.03125rem;
  outline: 2px solid var(--c-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. RODAPÉ  [4031:2637]
   -------------------------------------------------------------------------- */
.rodape { padding: 8.34rem 0 3rem; }

.cta-card {
  margin: 0 var(--s-80);
  min-height: 28rem;
  background-color: var(--c-dark);
  background-image: url('/assets/images/banner-cta.webp');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--r-l);
  padding: var(--s-48);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 34rem;
  z-index: 1;
}
.cta-title {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 500;
  color: var(--c-light-100);
  margin-bottom: var(--s-24);
}
.cta-text {
  font-size: 0.875rem;
  line-height: 1.45rem;
  font-weight: 500;
  text-align: left;
  color: var(--c-light-400);
  margin-bottom: var(--s-24);
  max-width: 32rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: var(--s-80);
  padding: 7rem var(--s-80) 0;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--s-24); max-width: 20rem; }
.footer-tagline { font-size: 0.875rem; line-height: 1.25rem; color: var(--c-gray); }
.footer-address { font-size: 0.875rem; line-height: 1.25rem; font-style: normal; color: var(--c-gray); }

.footer-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-40); flex: 1 0 0; }
.footer-nav { display: flex; gap: var(--s-40); }
.footer-nav a { font-size: 0.75rem; line-height: 1rem; color: var(--c-gray); }
.footer-nav a:hover { font-weight: 600; }
.footer-nav-instagram { display: inline-flex; align-items: center; gap: 0.375rem; }
.footer-nav-instagram svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}
.footer-nav-instagram svg circle:last-child { fill: currentColor; stroke: none; }

.footer-contact { display: flex; flex-direction: column; gap: var(--p-s); text-align: right; }
.footer-contact span { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--c-light-500); }
.footer-contact a { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--c-dark); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--s-24) var(--s-80) 0;
  padding: var(--p-l) 0 var(--s-32);
  border-top: 1px solid var(--c-light-200);
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--c-gray);
}

.footer-copyright-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.footer-privacy-sep {
  color: var(--c-gray, #666666);
}

/* Página 404 — curta, útil e coerente com o sistema visual do site. */
.not-found {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--s-80) var(--s-24);
}

.not-found__content {
  width: min(100%, 48rem);
  text-align: center;
}

.not-found__code {
  display: block;
  margin-bottom: var(--s-16);
  color: var(--c-yellow);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
}

.not-found__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
}

.not-found__text {
  max-width: 36rem;
  margin: var(--s-24) auto 0;
  color: var(--c-gray);
  font-size: 1rem;
  line-height: 1.6;
}

.not-found__actions {
  display: flex;
  justify-content: center;
  gap: var(--s-12);
  margin-top: var(--s-32);
  flex-wrap: wrap;
}

.not-found__actions .btn {
  min-height: 2.75rem;
}

@media (max-width: 640px) {
  .not-found {
    min-height: 80svh;
    padding: var(--s-48) var(--s-24);
  }

  .not-found__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.footer-privacy-link {
  color: var(--c-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.footer-privacy-link:hover {
  color: var(--c-dark);
}

/* --------------------------------------------------------------------------
   Responsivo — o Figma tem frames mobile próprios que ainda não foram
   implementados; abaixo é a adaptação fiel do layout desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gutter-left: 0px; --s-80: 40px; }
  .sol-head .badge, .pq-head .badge, .dep-head .badge, .qs-head .badge { width: auto; min-width: auto; }
  .seal { display: none; }
  .cases-col { width: 55%; }
  .sol-item { grid-template-columns: 48px 1fr; }
  .sol-chips { grid-column: 2; padding-top: var(--p-l); }
  .sol-text { padding-right: 0; }
  .pq-cards { flex-wrap: wrap; }
  .pq-card { width: calc(50% - var(--p-2xs)); }
  .qs-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .page { padding: var(--s-12); }
  .nav, .header-actions { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--p-xs);
    padding: 0 var(--p-xs);
  }
  .frase-team {
    padding-left: var(--s-12);
    padding-right: var(--s-12);
  }
  .team-pill,
  .team-pill:hover,
  .team-pill:focus-visible {
    width: 100%;
    min-width: 0;
    min-height: 4.5rem;
    padding: var(--p-xs);
    gap: var(--p-xs);
    border-radius: var(--r-m);
    transition: none;
  }
  .team-pill .avatar {
    width: 2.25rem;
    height: 2.25rem;
  }
  .team-pill span {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-right: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .team-pill b,
  .team-pill i {
    width: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    opacity: 1;
  }
  .team-pill b {
    font-size: 0.6875rem;
    line-height: 0.875rem;
    font-weight: 500;
  }
  .team-pill i {
    font-size: 0.5625rem;
    line-height: 0.6875rem;
  }
  .team-cta {
    grid-column: 1 / -1;
    width: 100%;
    height: 2.75rem;
    border-radius: var(--r-2xl);
    background: var(--c-gray);
    color: var(--c-light-100);
    text-decoration: none;
  }
  .team > .team-cta:first-of-type { display: none; }
  .team > .team-cta:last-of-type { order: 2; }

  /* Drawer do Menu no Hero */
  .hero-media .nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    background: rgba(30, 30, 28, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-m);
    padding: 1.25rem;
    z-index: 110;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    animation: navDrawerFade 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-media .nav.is-open a {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--c-light-100);
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-s);
    opacity: 0.85;
    display: block;
    transition: background-color 150ms ease, opacity 150ms ease, color 150ms ease;
  }
  .hero-media .nav.is-open .nav-contact-mobile,
  .site-header .nav.is-open .nav-contact-mobile { display: block; }
  .hero-media .nav.is-open a:active {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
    color: #fff;
  }

  /* Drawer do Menu no Header fixo */
  .site-header .nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-page);
    border-bottom: 1px solid var(--c-light-200);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
    padding: 1.25rem var(--s-12) 1.5rem;
    z-index: 110;
    animation: navDrawerFade 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .site-header .nav.is-open a {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--c-dark);
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-s);
    opacity: 0.85;
    display: block;
    transition: background-color 150ms ease, opacity 150ms ease, color 150ms ease;
  }
  .site-header .nav.is-open a:active {
    background: var(--c-light-200);
    opacity: 1;
  }

  @keyframes navDrawerFade {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .header-container { position: relative; }

  .hero-media { height: 520px; padding: var(--p-2xl) var(--s-24); }
  .why { padding: var(--section-space-mobile) var(--s-24); }
  .why-team-photo {
    aspect-ratio: auto;
    border-radius: var(--r-s);
  }
  .why-team-photo img {
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  .why-content { flex-direction: column; gap: var(--p-l); }
  .why-title { font-size: 24px; line-height: 32px; }
  .why-actions { justify-content: flex-start; }

  .para-que {
    min-height: 32rem;
    padding: var(--section-space-mobile) var(--s-24);
  }
  .para-que-title {
    left: var(--s-24);
    right: var(--s-24);
  }
  .seal {
    display: block;
    left: auto;
    right: var(--s-24);
    top: auto;
    bottom: var(--s-32);
    width: 5rem;
    height: auto;
  }
  .para-que-title, .dep-heading, .qs-heading { font-size: 28px; line-height: 36px; }

  .cases-header, .cases-grid, .cases-footer,
  .dep-head, .dep-footer, .qs-head { padding-left: var(--s-24); padding-right: var(--s-24); }
  .cases-row,
  .cases-row--full,
  .cases-row--compact {
    flex-direction: column;
    height: auto;
  }
  .cases-col {
    width: 100%;
  }
  .case--h,
  .case--v,
  .case--w {
    height: 320px;
    flex: none;
    width: 100%;
  }

  .cases-grid,
  .solucoes,
  .para-quem {
    padding-block: var(--section-space-mobile);
  }
  .solucoes,
  .para-quem { padding-inline: var(--s-24); }
  .frase-team { padding: var(--section-space-mobile) var(--s-12); }
  .depoimentos { padding-block: var(--section-space-mobile); }
  .sol-head, .pq-head, .dep-head, .qs-head { flex-direction: column; gap: var(--p-l); }
  .sol-head .badge, .pq-head .badge, .dep-head .badge, .qs-head .badge { width: auto; min-width: auto; }
  .sol-item { grid-template-columns: 1fr; gap: var(--p-l); }

  /* Mobile Stacking Cards (Para quem fazemos) */
  .pq-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 0;
    position: relative;
  }
  .pq-card {
    width: 100%;
    height: auto;
    min-height: 20.5rem;
    position: sticky;
    top: calc(5.5rem + var(--card-idx, 0) * 0.75rem);
    background: var(--c-light-100);
    border-radius: var(--r-l);
    border: 1px solid var(--c-light-200);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
    z-index: calc(10 + var(--card-idx, 0));
    will-change: transform, filter, opacity;
    transition: filter 220ms ease-out, opacity 220ms ease-out, transform 220ms ease-out;
  }
  .pq-card:nth-child(1) { --card-idx: 0; }
  .pq-card:nth-child(2) { --card-idx: 1; }
  .pq-card:nth-child(3) { --card-idx: 2; }
  .pq-card:nth-child(4) { --card-idx: 3; }

  .dep-track {
    padding-left: var(--s-24);
    padding-right: var(--s-24);
    align-items: stretch;
  }
  .dep-card {
    height: auto;
    min-height: 24rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .dep-card--s,
  .dep-card--l {
    width: calc(100vw - 3.5rem);
    max-width: 22rem;
  }
  .dep-title {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 600;
    min-height: auto;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
  }
  .dep-quote {
    font-size: 0.875rem;
    line-height: 1.35rem;
    min-height: auto;
    flex: 1 0 auto;
  }
  .dep-meta {
    margin-top: auto;
    padding-top: 0.5rem;
    flex-shrink: 0;
  }
  .dep-slider-nav { margin-left: 0; padding-left: var(--s-24); }

  .qs-stats { grid-template-columns: 1fr 1fr; padding-left: var(--s-24); padding-right: var(--s-24); }
  .frase { padding: 0; }

  .cta-card {
    margin: 0 var(--s-24);
    min-height: 0;
    width: auto;
    height: clamp(42rem, 180vw, 50.625rem);
    aspect-ratio: auto;
    padding: var(--s-48);
    align-items: flex-end;
    background-image: url('/assets/images/banner-cta-mobile.webp');
    background-position: center top;
    background-size: cover;
  }
  .cta-content {
    max-width: 100%;
    margin-right: auto;
    align-items: flex-start;
    text-align: left;
  }
  .cta-title {
    font-size: 1.125rem;
    line-height: 1.5625rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
  }
  .cta-text {
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 400;
    margin-bottom: 1.75rem;
    max-width: 100%;
    text-align: left;
  }
  @media (max-width: 25rem) {
    .cta-card { padding: var(--s-48) var(--s-32); }
  }
  .rodape { padding-top: var(--s-32); }
  .footer-content { flex-direction: column; padding: var(--s-48) var(--s-24) 0; }
  .footer-side { align-items: flex-start; }
  .footer-contact { width: 100%; text-align: left; }
  .footer-nav { flex-wrap: wrap; gap: var(--p-l); }
  .footer-bottom { margin: var(--s-32) var(--s-24) 0; flex-direction: column; align-items: flex-start; gap: var(--p-xs); }
  .footer-copyright-line { flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer-privacy-sep { display: none; }
  .footer-privacy-link { display: inline-block; padding: 2px 0; }
}

/* ==========================================================================
   Microinterações & Ajustes Responsivos Adicionais
   ========================================================================== */

/* Efeito Reveal */
.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Efeito Parallax em Imagens de Case */
@media (min-width: 861px) {
  .case-img {
    height: calc(100% + 2.25rem);
    top: -1.125rem;
    transform: translateY(var(--parallax-y, 0rem));
  }
}

/* prefers-reduced-motion: Desliga efeitos, mantendo layout estático correto */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .seal {
    animation: none !important;
  }
  .brands-track {
    animation: none !important;
  }
  .case-img {
    transform: none !important;
    transition: none !important;
  }
  .case--catalog .case-link::after,
  .case--catalog .case-content {
    transition: none !important;
  }
}

/* Ajustes finos adicionais para mobile */
@media (max-width: 860px) {
  body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: manual;
  }

  .why-title, .why-text, .sol-desc, .frase p, .cta-text {
    text-align: left !important;
  }

  /* Remoção de espaçamento artificial */
  .quem-somos {
    padding-block: var(--section-space-mobile);
  }

  .sol-head, .pq-head {
    height: auto !important;
  }

  /* Evitar compressão e overflow de elementos de equipe e cards */
  .team {
    height: auto !important;
  }

  .case-title {
    max-width: 100%;
    font-size: 20px;
    line-height: 24px;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Card universal mobile: paisagem, somente título e contraste inferior. */
  .case,
  .case--h,
  .case--v,
  .case--w,
  .case--catalog {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    flex: none;
  }

  .case-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.3) 34%,
      rgba(0, 0, 0, 0) 68%
    );
  }

  .case--catalog .case-link::after {
    opacity: 0;
  }

  .case-content,
  .case--catalog .case-content {
    z-index: 2;
    opacity: 1;
    padding: var(--s-24);
  }

  .case-tag,
  .case-desc,
  .case-arrow {
    display: none;
  }

  .case:hover .case-img,
  .case:focus-within .case-img {
    filter: none;
  }

  .case-title,
  .case--catalog .case-title {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.32);
  }
}

@media (max-width: 360px) {
  .case-title {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}

/* Destaque amarelo progressivo comandado por scroll na seção "Para quê" */
.highlight-scroll {
  position: relative;
  display: inline;
  background-image: linear-gradient(to right, var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-position: 0 85%;
  background-size: var(--highlight-progress, 0%) 35%;
  transition: background-size 100ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .highlight-scroll {
    background-size: 100% 35% !important;
  }
}

.sol-chips { position: relative; }

@media (hover: hover) and (min-width: 861px) {
  .sol-chips li {
    transform: translate(var(--dx, 0px), var(--dy, 0px));
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sol-item.is-dodging .sol-chips li { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-chips li { transform: none !important; transition: none !important; }
}

@media (hover: hover) {
  .pq-card {
    transition:
      filter  300ms ease-out 60ms,
      opacity 300ms ease-out 60ms,
      background-color 300ms ease-out,
      border-color     300ms ease-out,
      color            300ms ease-out;
  }

  /* qualquer card, enquanto o mouse estiver no grupo */
  .pq-cards:hover .pq-card {
    filter: blur(3px);
    opacity: .5;
  }

  /* menos o que está sob o cursor */
  .pq-cards:hover .pq-card:hover {
    filter: none;
    opacity: 1;
    transition-delay: 0ms;
  }

  .pq-cards:hover .pq-card { will-change: filter; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-card { transition: none; }
}

/* --------------------------------------------------------------------------
   Desfocagem de rolagem — faixa fixa na base da janela por onde o conteúdo
   "emerge" conforme sobe. Duas camadas empilhadas pelo mesmo motivo do
   carrossel: uma só camada mascarada faz crossfade e deixa fantasma.
   Some perto do fim da página, senão o rodapé nunca é visto nítido.
   -------------------------------------------------------------------------- */
.scroll-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  z-index: 30;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.scroll-blur.is-hidden { opacity: 0; }

.scroll-blur::before,
.scroll-blur::after {
  content: '';
  position: absolute;
  inset: 0;
}

.scroll-blur::before {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
}

.scroll-blur::after {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.4) 65%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.4) 65%, #000 100%);
}

/* Custa GPU a cada frame de rolagem: fora do mobile e de reduced-motion. */
@media (max-width: 860px) { .scroll-blur { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-blur { display: none; } }