/* =========================================================
   Trading Ideas — página de case
   Depende de css/style.css (header, footer, botões, tokens).
   Tudo aqui usa o prefixo .case- para não colidir com a home.
   ========================================================= */

.case-page {
  --case-navy: #0b1f3a;
  --case-navy-deep: #05101f;
  --case-light-bg: #f4f4f4;
  --case-light-fg: #1e1e1e;
  --case-light-muted: #6b6b6d;
  --case-square: #d41212;
  --case-accent: #d41212;
}

/* =========================================================
   HERO
   ========================================================= */

.case-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 150px var(--gutter) 50px;
  background: var(--case-navy-deep);
}

.case-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* sobreposição só na base: topo transparente (mostra a imagem),
   escurece até ~80% de preto na altura do texto (+15% de opacidade) */
.case-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, 0.52) 55%,
    rgba(0, 0, 0, 0.81) 82%,
    rgba(0, 0, 0, 0.81) 100%
  );
}

.case-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.case-hero__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(152, 152, 157, 0.43);
}

.case-hero__year {
  align-self: flex-start;
  background: #bf1010;
  color: #f2b6b6;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.5px;
  padding: 6px 16px;
  border-radius: 8px;
}

.case-hero__title {
  font-weight: 600;
  font-size: clamp(46px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: -2px;
  color: #fff;
}

.case-hero__sub {
  max-width: 620px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: #dfe6f0;
}

.case-hero__tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.case-hero__tags span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
}

/* =========================================================
   BLOCO DE TEXTO (fundo claro, 2 colunas) — reutilizável
   ========================================================= */

.case-block {
  background: var(--case-light-bg);
  color: var(--case-light-fg);
  padding: clamp(64px, 10vw, 120px) var(--gutter);
}

.case-block + .case-block {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.case-block__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}

.case-block__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #29292b;
  position: sticky;
  top: 110px;
}

.case-block__label::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--case-square);
  flex-shrink: 0;
  margin-top: 4px;
}

.case-authortag {
  width: clamp(161px, 18vw, 218px);
  height: auto;
  display: block;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.case-block__heading {
  font-weight: 600;
  font-size: clamp(24px, 3.3vw, 44px);
  line-height: 1.18;
  letter-spacing: -1px;
  color: #1e1e1e;
  text-wrap: balance;
}

.case-block__heading--tight { max-width: 24ch; }

.case-block__heading strong { font-weight: 700; }

/* headline em peso leve; palavras-chave em bold */
.case-block__heading--light { font-weight: 300; letter-spacing: -0.5px; }
.case-block__heading--light strong { font-weight: 600; color: #1e1e1e; }

.case-block__lead {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: #3a3a3a;
  max-width: 660px;
}

.case-block__body {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 780px;
}

.case-block__body p {
  font-size: 16.7px;
  line-height: 1.6;
  color: var(--case-light-muted);
}

.case-block__body strong { color: #1e1e1e; font-weight: 600; }

.case-block__media {
  width: 170%;
  max-width: calc(100vw - 2 * var(--gutter));
  margin-top: 16px;
  margin-left: 50%;
  transform: translateX(-50%);
  display: block;
  border-radius: 14px;
}

@media (max-width: 900px) {
  .case-block__media {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }
}

.case-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0;
}

.case-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16.7px;
  line-height: 1.5;
  color: var(--case-light-muted);
}

.case-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--case-square);
}

/* =========================================================
   FAIXA DE IMAGEM (showcase)
   ========================================================= */

.case-showcase {
  background: #ffffff;
  padding: clamp(48px, 7vw, 90px) var(--gutter);
  overflow: hidden;
}

.case-showcase img {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: block;
  border-radius: var(--case-showcase-radius, 30px);
  transform: scale(var(--case-showcase-scale, 1));
  transform-origin: center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .case-showcase img { transform: none; }
}

/* =========================================================
   FAIXA 3D — background full-bleed (100vw, sem raio) + celular e notebook
   que ultrapassam a faixa e invadem a parte branca (topo e base).
   Efeitos no scroll (js/case.js):
   (a) o background aparece suave ao entrar na seção  -> --case-hero2-reveal
   (c) o background expande na tela                    -> --case-hero2-zoom
   (b) celular e notebook se movem sutilmente          -> --case-hero2-*-y
   ========================================================= */

.case-hero2 {
  position: relative;
  z-index: 1;                       /* deixa o notebook passar por cima da seção seguinte */
  background: var(--case-light-bg);
  overflow-x: clip;                 /* trava só o scroll horizontal; deixa o notebook vazar pra baixo */
  padding-top: clamp(80px, 12vw, 172px);   /* respiro branco só no topo (o celular sobe) */
  padding-bottom: 0;                        /* a faixa termina no início da próxima seção */
}

.case-hero2__band {
  position: relative;
  width: 100%;
  height: clamp(350px, 46vw, 660px);
}

.case-hero2__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--case-hero2-reveal, 1);
  transform: scale(var(--case-hero2-zoom, 1));
  transform-origin: center;
  will-change: transform, opacity;
}

/* área onde os devices são posicionados: largura do site, centralizada,
   mas SEM recorte vertical (podem passar pra parte branca) */
.case-hero2__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-inline: auto;
  max-width: var(--max-width);
  padding-inline: var(--gutter);
  z-index: 1;
  pointer-events: none;
}

.case-hero2__device {
  position: absolute;
  display: block;
  will-change: transform;
}

.case-hero2__device--phone {
  width: clamp(300px, 42%, 576px);
  left: 16%;
  top: -20%;
  transform: translateY(var(--case-hero2-phone-y, 0px)) rotate(-3deg);
}

.case-hero2__device--laptop {
  width: clamp(352px, 50%, 736px);
  right: 9%;
  top: 3%;
  transform: translateY(var(--case-hero2-laptop-y, 0px)) rotate(-5deg);
}

@media (max-width: 720px) {
  .case-hero2 { padding-top: clamp(48px, 16vw, 96px); }
  .case-hero2__band { height: clamp(338px, 101vw, 520px); }
  .case-hero2__device--phone  { width: 54%; left: 8%;   top: -14%; }
  .case-hero2__device--laptop { width: 90%; right: -2%; top: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero2__bg { opacity: 1; transform: none; }
  .case-hero2__device--phone  { transform: rotate(-3deg); }
  .case-hero2__device--laptop { transform: rotate(-5deg); }
}

/* =========================================================
   MARQUEE (carrosséis automáticos)
   ========================================================= */

.case-marquee {
  position: relative;
  overflow: hidden;
}

.case-marquee::before,
.case-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 10%, 140px);
  z-index: 2;
  pointer-events: none;
}

.case-marquee::before { left: 0; background: linear-gradient(to right, var(--case-fade, #060606) 12%, transparent); }
.case-marquee::after { right: 0; background: linear-gradient(to left, var(--case-fade, #060606) 12%, transparent); }

.case-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: case-marquee 60s linear infinite;
  will-change: transform;
}

.case-marquee__track li { flex: 0 0 auto; }

@keyframes case-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); }
}

/* =========================================================
   SHOTS
   ========================================================= */

.case-shots {
  /* começa claro (igual à seção acima) e o preto vai aparecendo conforme
     o usuário rola por esta seção — controlado pelo JS via --case-shots-bg */
  background: var(--case-shots-bg, #ffffff);
  --case-fade: var(--case-shots-bg, #ffffff);
  padding: clamp(56px, 8vw, 90px) 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  transition: background-color 0.15s linear;
}

/* sem animação: mantém o visual escuro definitivo */
@media (prefers-reduced-motion: reduce) {
  .case-shots {
    --case-shots-bg: #060606;
    --case-shots-fg: #ffffff;
    --case-shots-fg-muted: rgba(255, 255, 255, 0.62);
  }
}

.case-shots__head {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--gutter) 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.case-shots__title {
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

.case-shots__icon { width: 30px; height: auto; display: block; opacity: 0.75; }

.case-shots .case-marquee__track img {
  height: clamp(340px, 50vw, 580px);
  width: auto;
  aspect-ratio: 684 / 912;
  object-fit: cover;
  border-radius: 16px;
}

.case-shots__intro {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  padding: 4px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case-shots__intro .case-authortag {
  width: clamp(121px, 13.5vw, 164px); /* 25% menor que o padrão */
  margin-bottom: 2px;
}

.case-shots__heading {
  font-weight: 600;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--case-shots-fg, #1e1e1e);
  max-width: 24ch;
  text-wrap: balance;
  transition: color 0.15s linear;
}

.case-shots__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--case-shots-fg-muted, rgba(20, 20, 20, 0.6));
  max-width: 68ch;
  transition: color 0.15s linear;
}

.case-shots__text + .case-shots__text { margin-top: -4px; }
.case-shots__text strong { color: var(--case-shots-fg, #1e1e1e); font-weight: 600; }

/* =========================================================
   HSCROLL — vitrine em scroll horizontal (o scroll vertical desliza a fileira)
   JS: applyHscroll() em case.js. Usado por suitpay/ e origyn/.
   ========================================================= */
.case-hscroll {
  position: relative;
  background: #ffffff;
}

.case-hscroll--dark { background: #060606; }

.case-hscroll__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.case-hscroll__track {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0 clamp(24px, 6vw, 96px);
  list-style: none;
  will-change: transform;
}

.case-hscroll__track li { flex: 0 0 auto; }

.case-hscroll__track img {
  display: block;
  height: min(84vh, 676px);
  width: auto;
  border-radius: 16px;
}

@media (max-width: 900px) {
  /* sem scroll-jack no mobile: fileira deslizável na horizontal */
  .case-hscroll { height: auto !important; }
  .case-hscroll__pin {
    position: static;
    height: auto;
    overflow-x: auto;
    padding: 40px 0;
    -webkit-overflow-scrolling: touch;
  }
  .case-hscroll__track {
    transform: none !important;
    padding: 0 20px;
    gap: 16px;
  }
  .case-hscroll__track img { height: auto; width: 90vw; max-width: 546px; }
}

/* =========================================================
   AD CREATIONS
   ========================================================= */

.case-ads {
  background: linear-gradient(180deg, #060606 0%, var(--case-navy-deep) 100%);
  padding: clamp(56px, 8vw, 90px) var(--gutter);
}

.case-ads__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.case-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

.case-label::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--case-accent);
  flex-shrink: 0;
}

.case-ads__hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -24px;
}

/* ----- Slider de campanhas ----- */

.case-ads-slider {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.case-ads-slider__viewport {
  overflow: hidden;
}

.case-ads-slider__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-ads-slide {
  flex: 0 0 100%;
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  align-items: flex-end;
  justify-content: safe center;
  min-height: clamp(560px, 84vh, 960px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.case-ad {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.case-ad img {
  width: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
}

.case-ad--story img    { height: clamp(630px, 87vh, 990px); }
.case-ad--portrait img { height: clamp(480px, 66vh, 750px); }
.case-ad--feed img     { height: clamp(375px, 51vh, 585px); }

.case-ads-slider__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.case-ads-slider__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.case-ads-slider__btn:hover { background: rgba(255, 255, 255, 0.12); }
.case-ads-slider__btn:disabled { opacity: 0.3; cursor: default; }

/* barra de progresso segmentada (estilo stories) + contador */
.case-ads-slider__progress {
  display: flex;
  gap: 6px;
  width: min(240px, 44vw);
}

.case-ads-slider__seg {
  position: relative;
  flex: 1;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  overflow: hidden;
}

.case-ads-slider__seg-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--case-accent);
}

.case-ads-slider__count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.case-ads-slider__count strong {
  color: #fff;
  font-weight: 500;
}

@media (max-width: 720px) {
  .case-ads-slide {
    align-items: center;
    min-height: 0;
  }
  /* no mobile cada peça ocupa a largura da tela e aparece 100%
     (cada formato mantém a própria proporção -> alturas diferentes) */
  .case-ad--story img,
  .case-ad--portrait img,
  .case-ad--feed img {
    height: auto;
    width: min(82vw, 380px);
  }
}

/* =========================================================
   SCREEN TYPES
   ========================================================= */

.case-screens {
  background: var(--case-navy-deep);
  padding: clamp(56px, 8vw, 90px) var(--gutter);
}

.case-screens__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.case-screens__head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.case-screens__stores {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.case-screens__stores svg { display: block; }

.case-screens__store img {
  width: 100%;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.case-screens__collage {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
}

.case-screens__collage img {
  width: 100%;
  display: block;
  margin-bottom: -1px;
}

/* =========================================================
   PLACEHOLDER (seções de template ainda sem imagem final)
   ========================================================= */

.case-placeholder {
  background: #060606;
  padding: clamp(36px, 6vw, 64px) var(--gutter);
}

.case-placeholder__box {
  max-width: var(--max-width);
  margin-inline: auto;
  min-height: 300px;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 40px;
}

.case-placeholder__box strong {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.6);
}

.case-placeholder__box span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.32);
}

/* =========================================================
   FIGURE (bloco de imagem cheia com legenda)
   ========================================================= */

.case-figure {
  /* sempre branco — o efeito de escurecer no scroll fica na seção Shots */
  background: #ffffff;
  padding: clamp(64px, 10vw, 120px) var(--gutter);
}

/* aproxima a "Visão geral" do bloco de imagem logo abaixo */
#visao-geral { padding-bottom: clamp(28px, 4vw, 48px); }
#visao-geral + .case-figure { padding-top: clamp(20px, 3vw, 40px); }

.case-figure__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-figure__caption {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: #1e1e1e;
  max-width: 60ch;
}

.case-figure__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* =========================================================
   TRIO (três faixas coloridas com uma imagem PNG ao centro)
   ========================================================= */

.case-trio {
  position: relative; /* altura definida pelo JS = 100vh + rolagem extra do e-mail do meio */
}

.case-trio__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.case-trio__col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 4vw, 56px);
  min-height: 440px;
}

.case-trio__col--light  { background: #FFFFFF; }
.case-trio__col--purple { background: #6E11E2; }
.case-trio__col--dark   { background: #191919; }
.case-trio__col--flush  { padding: 0; }

.case-trio__img {
  width: 70%;
  height: auto;
  display: block;
}

/* celular: svg com fundo da cor da faixa + frame + tela vazada. O e-mail rola
   por dentro da tela enquanto a seção fica presa (mesmo componente nas 3 colunas). */
.case-phone2 {
  position: relative;
  height: 100%;
  aspect-ratio: 640 / 1195;
  max-width: 100%;
}

.case-phone2__screen {
  position: absolute;
  /* buraco transparente do svg (640x1195): top 18.1% / right 15.8% / bottom 7.4% / left 16.25% */
  inset: 18.1% 15.8% 7.4% 16.25%;
  overflow: hidden;
  border-radius: 6% / 3%;
}

.case-phone2__stack {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.case-phone2__stack img {
  width: 100%;
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.case-phone2__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* .case-phone2 tem a mesma proporção do svg, então não distorce */
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 900px) {
  .case-trio { height: auto !important; }
  .case-trio__pin {
    position: static;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .case-trio__col { min-height: 320px; }
  .case-phone2 { height: auto; width: min(82%, 340px); }
  .case-phone2__screen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .case-phone2__screen::-webkit-scrollbar { display: none; }
  .case-phone2__stack { transform: none !important; }
}

/* =========================================================
   CARROSSÉIS (3 tiras horizontais deslizáveis, fundo branco)
   ========================================================= */

.case-carousels {
  background: #ffffff;
  padding: clamp(28px, 4vw, 44px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  overflow-x: clip; /* segura o "vazamento" dos carrosséis dentro da viewport */
}

/* seções vizinhas dos carrosséis encostam mais */
.case-carousels + .case-block { padding-top: clamp(24px, 4vw, 40px); }
.case-block:has(+ .case-carousels) { padding-bottom: clamp(24px, 4vw, 40px); }

.case-carousels__head {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--gutter);
}

.case-carousels__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #29292b;
}

.case-carousels__label::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--case-square, #bf1010);
  flex-shrink: 0;
}

.case-carousels__heading {
  margin-top: 14px;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: #1e1e1e;
  max-width: 22ch;
  text-wrap: balance;
}

.case-carousel {
  --case-carousel-gap: 16px;
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* a viewport se estende até a borda direita da tela: a 4ª imagem "vaza"
   e é cortada pela borda da tela, não por uma linha interna */
.case-carousel__viewport {
  overflow: hidden;
  margin-right: calc(-1 * (max(0px, (100vw - var(--max-width)) / 2) + var(--gutter)));
}

.case-carousel__track {
  display: flex;
  gap: var(--case-carousel-gap);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3 imagens cheias dentro do grid; a 4ª aparece e some na borda da tela */
.case-carousel__track > li {
  flex: 0 0 calc((100% - var(--gutter) - 2 * var(--case-carousel-gap)) / 3 - 22px);
}

.case-carousel__track img {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1340;
  object-fit: cover;
  border-radius: 14px;
  background: #f0f0f0;
  display: block;
}

/* controles embaixo, ao lado dos dots, em vermelho */
.case-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.case-carousel__nav {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--case-square, #d41212);
  background: transparent;
  color: var(--case-square, #d41212);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.case-carousel__nav:hover { background: var(--case-square, #d41212); color: #ffffff; }
.case-carousel__nav svg { width: 15px; height: 15px; }
.case-carousel__nav[disabled] { opacity: 0.3; pointer-events: none; }

.case-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.case-carousel__dot[aria-current="true"] {
  width: 22px;
  background: var(--case-square, #d41212);
}

@media (max-width: 720px) {
  /* no touch: vira uma tira deslizável nativa, sem controles */
  .case-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: 0;
  }
  .case-carousel__viewport::-webkit-scrollbar { display: none; }
  .case-carousel__track {
    transform: none !important;
    transition: none;
  }
  .case-carousel__track > li {
    flex-basis: 74%;
    scroll-snap-align: start;
  }
  .case-carousel__controls { display: none; }
}

/* =========================================================
   SHOWCASE — imagens finais empilhadas em cascata (sticky)
   Cada imagem gruda no topo e cresce até full-bleed; a próxima
   sobe por cima. JS: applyShowcaseStack() em case.js.
   Usado por suitpay/ e origyn/ (base .case-showcase).
   ========================================================= */

.case-showcase--stack {
  display: flex;
  flex-direction: column;
  overflow: visible; /* o overflow:hidden herdado de .case-showcase quebra o sticky */
}

.case-showcase--stack img {
  position: sticky;
  top: 8vh;
  transform: scale(var(--case-final-scale, 1));
  transform-origin: center;
  border-radius: var(--case-final-radius, 24px);
  will-change: transform;
}

.case-showcase--stack img:not(:last-child) {
  margin-bottom: 18vh;
}

@media (prefers-reduced-motion: reduce) {
  .case-showcase--stack img { transform: none; border-radius: 24px; }
}

@media (max-width: 900px) {
  .case-showcase--stack { gap: clamp(20px, 5vw, 40px); }
  .case-showcase--stack img {
    position: static;
    margin-bottom: 0;
  }
}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */

.case-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 900px) {
  .case-block__inner { grid-template-columns: 1fr; gap: 22px; }
  .case-block__label { position: static; }
  .case-block__body { margin-top: 8px; }
}

@media (max-width: 640px) {
  .case-hero { padding: 128px 20px 40px; min-height: 640px; }
  .case-hero__title { letter-spacing: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-marquee { overflow-x: auto; }
  .case-marquee__track { animation: none; width: auto; }
  .case-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   CTA FINAL — reaproveita a linguagem do hero do site
   ========================================================= */

.case-cta {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
  padding-top: 96px;
}

.case-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.case-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0) 0%, rgba(6, 6, 6, 0.55) 45%, #060606 100%);
  pointer-events: none;
  z-index: 1;
}

.case-cta__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 var(--gutter) 44px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 8vw, 72px);
}

.case-cta__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.case-cta__badge {
  display: flex;
  align-items: center;
  gap: 16px;
}

.case-cta__badge-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.65);
  flex-shrink: 0;
}

.case-cta__badge p {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  color: #fff;
}

.case-cta__badge p span { color: #949494; }

.case-cta__heading {
  font-weight: 300;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: #fff;
  max-width: 16ch;
  text-wrap: balance;
}

.case-cta__heading strong { font-weight: 600; }

.case-cta__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.case-cta__footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-cta__divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
}

.case-cta__meta {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 14px;
  color: #949494;
}

@media (max-width: 640px) {
  .case-cta { min-height: 86vh; padding-top: 120px; }
  .case-cta__bg { content: url("../hero-mobile-oigorsop.webp"); object-position: center; }
  .case-cta__buttons { width: 100%; }
  .case-cta__buttons .btn { flex: 1; }
}

/* =========================================================
   HEADER — nas páginas de case não fica fixo
   ========================================================= */
body.case-page .site-header {
  position: static;
}