/* ==========================================================
   AND Studio de Marcas — Páginas de case v2 (case.css)
   Compartilhado por todos os cases/<slug>.html. Carrega DEPOIS
   do and.css e usa os tokens dele (--navy, --red, --serif…).
   Estados iniciais escondidos sempre sob html.js:not(.no-motion),
   para o conteúdo aparecer sem JS ou sem CDN.

   Sumário
   1. Página e ritmo          8. Mídia: moldura, legenda, única
   2. Nav (link EN)           9. Mídia: linha, dupla, mosaico
   3. Hero do case           10. Faixa animada e vídeo
   4. Índice de capítulos    11. Galeria horizontal
   5. Texto em duas colunas  12. Lightbox
   6. Pilares                13. Chamada e próximo case
   7. Citação / manifesto    14. Movimento reduzido e impressão

   Proporção das imagens: --r = largura/altura escrita como
   fração (style="--r: 2000/1126"), copiada do width/height.
   Recorte só no celular: --r-m, --pos-m e --fit-m na moldura (§8).
   Variações: .cs-text--center (capítulo sem corpo: título + pilares),
   .cs-quote--motto (frase curta em cartaz), .cs-quote--statement
   (epílogo), .cs-pair--arch / --mirror, .cs-media--air também na
   faixa de texto (.cs-band). Imagem repetida em recorte: ponha
   data-no-lightbox na repetição (o lightbox já mostra a inteira).
   ========================================================== */

/* ---------- 1. Página e ritmo ---------- */
.case {
  --cs-gap: clamp(0.5rem, 0.25rem + 0.7vw, 1rem);   /* entre imagens vizinhas */
  --cs-y: clamp(5rem, 3rem + 6vw, 9.5rem);           /* respiro dos blocos de texto */
  --cs-air: clamp(3rem, 1.5rem + 5vw, 7rem);         /* respiro extra entre grupos de imagens */
  --cs-rowh: min(86vh, 940px);                       /* teto de altura de uma linha de imagens */
}
/* legendas "Fig. I, II…" numeradas sozinhas, na ordem da página */
.case main { counter-reset: cs-fig; }

/* blocos de mídia encostam uns nos outros com o mesmo respiro fino */
.case main > :is(.cs-media, .cs-band) + :is(.cs-media, .cs-band) { margin-top: var(--cs-gap); }
.case main > .cs-media.cs-media--air,
.case main > .cs-band.cs-media--air { margin-top: var(--cs-air); }

/* ---------- 2. Nav: link de idioma (mesmo desenho da home) ---------- */
.cs-lang { margin-left: 0.35rem; }
.cs-lang::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.25rem, 2.2vw, 2.5rem) / -2 - 0.2rem);
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: rgba(238, 238, 238, 0.2);
}

/* menu mobile: no lugar da pintura, a imagem do próprio case. No HTML vai
   data-cs-menu-art="../Imagens/…" (o case.js converte em --cs-menu-art absoluta);
   sem o atributo, fundo navy liso. Só carrega <1024px e depois da intro. */
@media (max-width: 1023px) {
  html.is-ready body.case .and-menu__art { background-image: var(--cs-menu-art, none); }
}
body.case .and-menu__art { opacity: 0.16; background-position: center; }

/* ==========================================================
   3. HERO DO CASE
   ========================================================== */
.cs-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 4.5vh, 3.25rem));
  background: var(--navy);
  overflow: hidden;
}
.cs-hero__inner { position: relative; z-index: 1; }

.cs-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
}

/* breadcrumb "Cases → Nome" */
.cs-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
.cs-crumb li { display: inline-flex; align-items: center; gap: 0.85rem; }
.cs-crumb li + li::before {
  content: '';
  flex: none;
  width: 1.1rem;
  height: 0.62rem;
  background: var(--red);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}
.cs-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper-light); }
.cs-crumb a:hover, .cs-crumb a:focus-visible { color: var(--red-hi); }
.cs-crumb [aria-current] { color: var(--gray-light); }

.cs-hero__label { white-space: nowrap; }
.cs-hero__label .numeral { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: none; }

/* nome do cliente: o maior texto da página */
.cs-hero__title {
  margin-top: clamp(1.25rem, 3.5vh, 2.75rem);
  font-size: clamp(2.75rem, 0.9rem + 10.5vw, 11.5rem);
  font-weight: 300;
  line-height: 0.93;
  letter-spacing: -0.03em;
  color: var(--paper-light);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.cs-hero__title em { font-style: italic; color: var(--accent); }

.cs-hero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(1.75rem, 4vh, 2.5rem);
  align-items: end;
  margin-top: clamp(1.75rem, 4.5vh, 3.25rem);
}
.cs-hero__lead {
  grid-column: 7 / -1;
  grid-row: 1;
  max-width: 36ch;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.02rem + 0.8vw, 1.75rem);
  font-weight: 300;
  line-height: 1.38;
  color: var(--paper);
}
.cs-hero__lead em { font-style: italic; color: var(--paper-light); }

/* indicador de rolagem */
.cs-cue {
  grid-column: 1 / span 5;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color 0.4s;
}
.cs-cue:hover, .cs-cue:focus-visible { color: var(--paper-light); }
.cs-cue__line {
  position: relative;
  flex: none;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(238, 238, 238, 0.16);
}
.cs-cue__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translate3d(0, -100%, 0);
  animation: cs-cue 2.6s var(--ease-in-out) infinite;
}
@keyframes cs-cue {
  0%   { transform: translate3d(0, -100%, 0); }
  55%  { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}
.cs-hero.is-offscreen .cs-cue__line::after { animation-play-state: paused; }

/* ficha técnica em linha, entre filetes que se desenham */
.cs-meta {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1.7fr);
  margin: 0;
}
.cs-meta::before,
.cs-meta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease-in-out);
}
.cs-meta::before { top: 0; }
.cs-meta::after { bottom: 0; transition-delay: 0.15s; }
html.js:not(.no-motion):not(.reduced-motion) .cs-meta:not(:has(> .is-revealed))::before,
html.js:not(.no-motion):not(.reduced-motion) .cs-meta:not(:has(> .is-revealed))::after { transform: scaleX(0); }
.cs-meta > div { min-width: 0; padding: 1.2rem 1.25rem 1.3rem 0; }
.cs-meta > div + div { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line); }
.cs-meta dt {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray);
}
.cs-meta dd {
  margin: 0.55rem 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--paper-light);
}

/* capa em sangria: proporção natural no desktop (--ar), recorte próprio no celular (--ar-m) */
.cs-cover { position: relative; margin: clamp(2.25rem, 5.5vh, 4.25rem) 0 0; }
.cs-cover__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  max-height: 92vh;
  max-height: 92svh;
  overflow: hidden;
  background: var(--navy-2);
}
.cs-cover__zoom { position: absolute; inset: 0; display: block; transform-origin: 50% 40%; will-change: transform; }
.cs-cover__zoom img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.cs-cover .grain { opacity: 0.05; }

@media (max-width: 1023px) {
  .cs-hero__lead { grid-column: 5 / -1; }
  .cs-cue { grid-column: 1 / span 4; }
  .cs-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr); }
  .cs-meta > div:nth-child(4) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .cs-hero__foot { row-gap: 1.75rem; }
  .cs-hero__lead { grid-column: 1 / -1; }
  .cs-cue { display: none; }
  /* celular: ficha como plaqueta de museu — rótulo à esquerda, valor à direita */
  .cs-meta { grid-template-columns: minmax(0, 1fr); }
  .cs-meta > div:nth-child(n) {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    grid-column: 1;
    padding: 0.85rem 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .cs-meta > div:first-child { border-top: 0; }
  .cs-meta dd { margin: 0; }
  .cs-cover__frame { aspect-ratio: var(--ar-m, var(--ar, 4 / 3)); }
  .cs-cover__zoom img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
}
@media (max-width: 379px) {
  .cs-meta > div { padding-right: 0.75rem; }
}

/* entrada do hero: a fundação revela; aqui só o indicador espera a página */
html.js:not(.no-motion):not(.is-ready) .cs-cue { opacity: 0; }
html.is-ready .cs-cue { transition: opacity 1.2s var(--ease-out) 1s, color 0.4s; }

/* ==========================================================
   4. ÍNDICE DE CAPÍTULOS (montado pelo case.js, só ≥1024px)
   Lombada vertical na margem esquerda, dentro do gutter: não cobre
   título, texto nem legenda. Lê-se de baixo para cima:
   "II / V —— O conceito". Hover, clique ou foco abrem a lista ao lado.
   ========================================================== */
.cs-index {
  --ix-w: min(32px, calc(var(--gutter) - 8px));   /* largura visível da lombada */
  position: fixed;
  /* centrada no gutter, descontado o filete das duplas (anel + 1px), que avança ~11px nele */
  left: max(2px, calc((var(--gutter) - 12px - var(--ix-w)) / 2));
  bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 45;
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-10px, 0, 0);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-expo), visibility 0s linear 0.6s;
}
@media (min-width: 1024px) {
  html.js .cs-index { display: block; }
}
.cs-index.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-expo), visibility 0s;
}
.cs-index__panel { position: relative; }
/* a lombada: texto na vertical (vertical-rl girado 180° = de baixo para cima) */
.cs-index__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: var(--ix-w);
  min-height: 44px;
  padding: 1rem 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border: 1px solid rgba(238, 238, 238, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(22, 26, 38, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: border-color 0.5s var(--ease-out);
}
/* alvo de toque de 44px na largura, sem engordar o desenho */
.cs-index__toggle { position: relative; }
.cs-index__toggle::after { content: ''; position: absolute; inset: 0 -6px; }
.cs-index__toggle:hover,
.cs-index.is-open .cs-index__toggle { border-color: rgba(234, 61, 61, 0.45); }
.cs-index__count {
  flex: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--paper-light);
}
.cs-index__count b { font-weight: 400; color: var(--red-hi); }
.cs-index__name { max-inline-size: 34vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
/* filete de progresso: inline-size = altura na vertical; cresce do numeral para o nome */
.cs-index__line { position: relative; flex: 0 0 28px; inline-size: 28px; block-size: 1px; background: var(--line); overflow: hidden; }
.cs-index__fill { position: absolute; inset: 0; background: var(--red); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
/* lista de capítulos: abre ao lado da lombada (o padding é a ponte do hover) */
.cs-index__list {
  position: absolute;
  left: 100%;
  bottom: 0;
  padding-left: 10px;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-expo), opacity 0.5s var(--ease-out), visibility 0s linear 0.8s;
}
.cs-index.is-open .cs-index__list {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s var(--ease-expo), opacity 0.5s var(--ease-out), visibility 0s;
}
.cs-index__clip {
  width: max-content;
  min-width: 220px;
  max-width: min(320px, 40vw);
  margin: 0;
  padding: 0.55rem 0;
  list-style: none;
  border: 1px solid rgba(238, 238, 238, 0.1);
  border-radius: 18px;
  background: rgba(22, 26, 38, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
.cs-index__link {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  min-height: 40px;
  padding: 0.35rem 1.1rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--gray-light);
  transition: color 0.35s, transform 0.6s var(--ease-expo);
}
.cs-index__link span { min-width: 2.1rem; font-style: italic; font-size: 0.88rem; color: var(--red-hi); }
.cs-index__link:hover, .cs-index__link:focus-visible { color: var(--paper-light); transform: translateX(0.25rem); }
.cs-index__link[aria-current] { color: var(--paper-light); font-style: italic; }
.cs-index__link:focus-visible { outline-offset: -3px; }

/* ==========================================================
   5. TEXTO EM DUAS COLUNAS (capítulos)
   ========================================================== */
.cs-text { position: relative; padding-block: var(--cs-y); }
.cs-text__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.5rem;
  align-items: start;
}
.cs-text__head { grid-column: 1 / span 6; }
.cs-text__body { grid-column: 8 / -1; padding-top: calc(var(--fs-label) * 1.4 + 1.5rem); }
.cs-title {
  max-width: 13ch;
  margin-top: 1.5rem;
  font-size: clamp(2.3rem, 1.25rem + 3.6vw, 5rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.cs-title em { font-style: italic; color: var(--accent); }
.cs-text__body p { max-width: 46ch; font-size: 1.04rem; line-height: 1.8; color: var(--muted); }
.cs-text__body p + p { margin-top: 1.25em; }
/* o 1º parágrafo abre em serif, como a home */
.cs-text__body p:first-child {
  max-width: 30ch;
  font-family: var(--serif);
  font-size: clamp(1.28rem, 1.05rem + 0.65vw, 1.7rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--fg-strong);
}
.cs-text__body p:first-child + p { margin-top: 1.6rem; }
.cs-text__body em { font-style: italic; }

/* variação: título centralizado e sem corpo (ou corpo curto embaixo) */
.cs-text--center .cs-text__grid { justify-items: center; text-align: center; }
.cs-text--center .cs-text__head,
.cs-text--center .cs-text__body { grid-column: 2 / span 10; }
.cs-text--center .cs-title { max-width: 16ch; margin-inline: auto; }
.cs-text--center .cs-text__body { padding-top: 0; }
.cs-text--center .cs-text__body p { margin-inline: auto; }

/* seção em papel (alternância de ritmo): use com .theme-light */
.cs-text.theme-light .cs-text__body p:first-child { color: var(--navy); }

@media (max-width: 1023px) {
  .cs-text__head { grid-column: 1 / span 10; }
  .cs-text__body { grid-column: 3 / -1; padding-top: 0; }
}
@media (max-width: 767px) {
  .cs-text__head, .cs-text__body,
  .cs-text--center .cs-text__head, .cs-text--center .cs-text__body { grid-column: 1 / -1; }
}

/* ==========================================================
   6. PILARES (numerais romanos)
   ========================================================== */
.cs-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) var(--gap);
  margin: clamp(4rem, 8vw, 7rem) 0 0;
  padding: 0;
  list-style: none;
}
.cs-pillar { position: relative; padding-top: clamp(1.75rem, 3vw, 2.5rem); }
/* filete de topo que se desenha quando o pilar entra */
.cs-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease-in-out);
}
.cs-pillar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--red);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-expo) 0.5s;
}
html.js:not(.no-motion):not(.reduced-motion) .cs-pillar[data-reveal]:not(.is-revealed)::before,
html.js:not(.no-motion):not(.reduced-motion) .cs-pillar[data-reveal]:not(.is-revealed)::after { transform: scaleX(0); }
.cs-pillar__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.75rem, 2.4rem + 3.6vw, 6.5rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 238, 238, 0.42);
  transition: color 0.9s var(--ease-out), -webkit-text-stroke-color 0.9s var(--ease-out);
}
.theme-light .cs-pillar__num { -webkit-text-stroke-color: rgba(22, 26, 38, 0.38); }
.cs-pillar:hover .cs-pillar__num { color: rgba(234, 61, 61, 0.1); -webkit-text-stroke-color: var(--red); }
.cs-pillar__title { margin-top: 1.5rem; font-size: var(--fs-h3); font-weight: 400; }
.cs-pillar__text { margin-top: 0.9rem; max-width: 40ch; color: var(--muted); line-height: 1.75; }

/* ==========================================================
   7. CITAÇÃO / MANIFESTO
   ========================================================== */
.cs-quote { position: relative; padding-block: var(--cs-y); }
.cs-quote__fig { position: relative; max-width: 1120px; margin-inline: auto; }
.cs-quote__mark {
  display: block;
  height: 0.5em;
  margin: 0 0 0 -0.04em;
  font-family: var(--serif);
  font-size: clamp(6rem, 3.5rem + 8vw, 12rem);
  font-style: italic;
  line-height: 0.9;
  color: var(--red);
}
.cs-quote__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 1.15rem + 2.9vw, 4.1rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
.cs-quote__text em { font-style: italic; color: var(--accent); }
.cs-quote__cap { margin-top: clamp(2rem, 4vw, 3rem); }

/* fecho / declaração: centralizada, sem aspas, com ornamento */
.cs-quote--statement .cs-quote__fig { max-width: 1040px; text-align: center; }
.cs-quote--statement .cs-quote__text { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.5rem); line-height: 1.22; }
.cs-quote--statement .ornament { max-width: 260px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.cs-quote--statement .cs-quote__label { justify-content: center; margin-bottom: 1.5rem; }
.cs-quote--statement .cs-quote__cap { justify-content: center; }

/* frase curta (conceito ou campanha, poucas palavras): cartaz centralizado,
   maior que a faixa de texto; o <p> interno leva o balance (o and.css põe "pretty" em todo p) */
.cs-quote--motto .cs-quote__fig { max-width: 1180px; text-align: center; }
.cs-quote--motto .cs-quote__text { font-size: clamp(2.5rem, 0.9rem + 6vw, 7.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.cs-quote--motto .cs-quote__text p { text-wrap: balance; }
.cs-quote--motto .cs-quote__cap { justify-content: center; }
@media (max-width: 599px) {
  /* celular: o filete sobe e o crédito quebra centralizado embaixo dele */
  .cs-quote--motto .cs-quote__cap { flex-direction: column; gap: 0.9rem; }
}

/* ==========================================================
   8. MÍDIA — moldura, legenda e imagem única
   ========================================================== */
.cs-media {
  position: relative;
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.cs-media--bleed { max-width: none; padding-inline: 0; }
.cs-media--narrow { max-width: calc(1080px + var(--gutter) * 2); }

/* moldura: guarda a proporção (--r), recorta e recebe o reveal "clip" */
.cs-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--r, 4 / 3);
  background: var(--cs-fill, var(--navy-2));
}
.cs-frame > :is(img, video, iframe, picture) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: var(--fit, cover);
  object-position: var(--pos, 50% 50%);
}
.cs-frame > picture > img { width: 100%; height: 100%; max-width: none; object-fit: var(--fit, cover); object-position: var(--pos, 50% 50%); }
/* imagem inteira, sem corte (pranchas com texto, fundo branco): preencha o fundo com --cs-fill */
.cs-fig--contain .cs-frame,
.cs-cell--contain .cs-frame { --fit: contain; }
/* altura da tela: fotos em sangria que não precisam aparecer inteiras */
.cs-fig--screen .cs-frame { max-height: 100vh; max-height: 100svh; width: 100%; }

/* recorte próprio no celular (<768px), na moldura de imagem única ou da dupla:
   --r-m (proporção), --pos-m (enquadramento), --fit-m (cover | contain).
   Ex.: banner 1920x696 em sangria → style="--r: 1920/696; --r-m: 16/10; --pos-m: 0% 50%".
   Numa .cs-row a proporção é da célula (--r): não use --r-m ali. */
@media (max-width: 767px) {
  .cs-frame[style*="--r-m"] { aspect-ratio: var(--r-m); }
  .cs-frame[style*="--pos-m"] > :is(img, video),
  .cs-frame[style*="--pos-m"] > picture > img { object-position: var(--pos-m); }
  .cs-frame[style*="--fit-m"] { --fit: var(--fit-m); }
}

/* imagem que ainda carrega quando a moldura abre (rolagem rápida): o case.js marca
   com .cs-wait e ela entra em fade ao chegar, em vez de "pular" sobre o fundo */
.cs-frame > img,
.cs-frame > picture > img { transition: opacity 0.9s var(--ease-out), filter 0.8s var(--ease-out); }
html.js:not(.no-motion) .cs-frame img.cs-wait { opacity: 0; }

/* ampliável (o case.js marca as molduras com imagem) */
.cs-frame[data-lb] { cursor: zoom-in; }
@media (hover: hover) {
  .cs-frame[data-lb]:hover > img { filter: brightness(1.06); }
}
.cs-frame[data-lb]:focus-visible { outline-offset: 3px; }

/* legenda discreta, numerada "Fig. I" em romano */
.cs-cap {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-top: 0.95rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--subtle);
}
.cs-cap::before {
  counter-increment: cs-fig;
  content: 'Fig. ' counter(cs-fig, upper-roman);
  flex: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  white-space: nowrap;
}
.cs-cap--plain::before { content: none; }
.cs-media--bleed > .cs-cap { padding-inline: var(--gutter); }

.cs-fig { margin-block: 0; }

/* ==========================================================
   9. MÍDIA — linha justificada, dupla editorial e mosaico
   ========================================================== */
/* Linha: cada célula cresce na razão da sua proporção (--r), então todas
   ficam com a mesma altura e nenhuma é cortada. O JS soma as proporções
   (--sum) para limitar a altura da linha em telas largas. */
.cs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;   /* no celular, a célula que sobra sozinha fica ao centro */
  gap: var(--cs-gap);
  margin-block: 0;
}
.cs-media.cs-row {
  max-width: min(
    calc(var(--container-wide) + var(--gutter) * 2),
    calc(var(--cs-rowh) * var(--sum, 99) + (var(--n, 1) - 1) * var(--cs-gap) + var(--gutter) * 2)
  );
}
.cs-media--bleed.cs-row { max-width: none; }
.cs-cell { position: relative; min-width: 0; margin: 0; }
.cs-row > .cs-cell { flex: calc(var(--r, 1)) 1 0; }
.cs-row > .cs-cap { flex: 0 0 100%; order: 99; margin-top: calc(0.95rem - var(--cs-gap)); }

/* celular: as células quebram em linhas; cada linha continua justificada */
@media (max-width: 767px) {
  .cs-row { --h: 44vw; }
  .cs-media.cs-row { max-width: none; }
  .cs-row > .cs-cell { flex: calc(var(--r, 1)) 1 calc(var(--r, 1) * var(--h)); max-width: 100%; }
  .cs-row > .cs-cell > .cs-frame { max-height: 78vh; max-height: 78svh; }
  /* --stack-m: uma imagem por linha, na proporção natural */
  .cs-row--stack-m > .cs-cell { flex-basis: 100%; }
}

/* Dupla editorial: uma grande e uma menor deslocada (com parallax opcional) */
/* 2ª linha flexível: a legenda fica logo abaixo da grande, e a menor (que ocupa
   as duas linhas) pode descer além dela sem empurrar a legenda */
.cs-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  align-items: start;
  margin-block: 0;
}
/* folga embaixo: a menor desce além da grande e o parallax ainda a empurra ~20px para baixo */
.case main > .cs-pair { padding-bottom: clamp(1.5rem, 3.5vw, 3.5rem); }
.cs-pair__a { grid-column: 1 / span 8; grid-row: 1; }
.cs-pair__b { grid-column: 9 / -1; grid-row: 1 / span 2; margin-top: clamp(4rem, 13vw, 13rem); }
.cs-pair > .cs-cap { grid-column: 1 / span 8; grid-row: 2; }
.cs-pair--mirror .cs-pair__a { grid-column: 5 / -1; }
.cs-pair--mirror .cs-pair__b { grid-column: 1 / span 4; }
.cs-pair--mirror > .cs-cap { grid-column: 5 / -1; }
/* janela em arco, como na home */
.cs-pair { --cs-ring: clamp(6px, 0.8vw, 10px); }
.cs-pair--arch .cs-pair__b .cs-frame { border-radius: 999px 999px 0 0; }
.cs-pair__b .cs-frame { box-shadow: 0 0 0 var(--cs-ring) var(--navy); }
.theme-light .cs-pair__b .cs-frame { box-shadow: 0 0 0 var(--cs-ring) var(--paper); }
/* moldura clássica: filete fino em volta do anel. Desenha a janela mesmo quando a
   imagem é escura e se funde ao navy. Fica no wrapper da menor (o do parallax),
   fora do overflow da moldura, e acende depois que o clip abre. */
.cs-pair__b > * { position: relative; }
.cs-pair__b > *::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--cs-ring) - 1px);
  border: 1px solid rgba(238, 238, 238, 0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out) 0.9s;
}
.cs-pair--arch .cs-pair__b > *::before { border-radius: 999px 999px 0 0; }
.theme-light .cs-pair__b > *::before { border-color: rgba(22, 26, 38, 0.2); }
.cs-pair__b > :has(.cs-frame.is-revealed)::before,
html:not(.js) .cs-pair__b > *::before,
html.no-motion .cs-pair__b > *::before { opacity: 1; }
@media (max-width: 767px) {
  /* a menor fica parada no celular: o parallax a jogaria sobre a legenda logo abaixo */
  .cs-pair__b > [data-parallax] { transform: none !important; }
  .case main > .cs-pair { padding-bottom: 0; }
  .cs-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .cs-pair__a, .cs-pair--mirror .cs-pair__a { grid-column: 1; grid-row: 1; margin-right: 10%; }
  .cs-pair--mirror .cs-pair__a { margin: 0 0 0 10%; }
  /* sem sobreposição no celular: a menor desce deslocada para o lado, sem cobrir a grande */
  .cs-pair__b, .cs-pair--mirror .cs-pair__b { grid-column: 1; grid-row: 2; width: 58%; margin: calc(var(--cs-gap) * 2) 0 0 auto; position: relative; z-index: 2; }
  .cs-pair--mirror .cs-pair__b { margin: calc(var(--cs-gap) * 2) auto 0 0; }
  .cs-pair > .cs-cap, .cs-pair--mirror > .cs-cap { grid-column: 1; grid-row: 3; }
}

/* Mosaico: a principal (1ª célula) na sua proporção + duas empilhadas ao lado.
   Altura fixa do bloco (--mh); a coluna da principal = --mh × --r (no <figure>),
   com teto de 64% da largura. As laterais preenchem e são recortadas (cover). */
.cs-mosaic {
  --mh: min(76vh, 50vw, 820px);
  display: grid;
  grid-template-columns: minmax(0, min(calc(var(--mh) * var(--r, 0.75)), 64%)) minmax(0, 1fr);
  grid-template-rows: repeat(2, calc((var(--mh) - var(--cs-gap)) / 2));
  gap: var(--cs-gap);
  margin-block: 0;
}
.cs-mosaic > .cs-cell { min-height: 0; }
.cs-mosaic > .cs-cell:first-child { grid-row: 1 / span 2; }
.cs-mosaic > .cs-cell > .cs-frame { height: 100%; aspect-ratio: auto; }
.cs-mosaic > .cs-cap { grid-column: 1 / -1; grid-row: 3; margin-top: calc(0.95rem - var(--cs-gap)); }
.cs-mosaic--mirror { grid-template-columns: minmax(0, 1fr) minmax(0, min(calc(var(--mh) * var(--r, 0.75)), 64%)); }
.cs-mosaic--mirror > .cs-cell:first-child { grid-column: 2; }
.cs-mosaic--mirror > .cs-cell:not(:first-child) { grid-column: 1; }
@media (max-width: 767px) {
  /* celular: principal inteira em cima, as duas lado a lado embaixo (quadradas) */
  .cs-mosaic, .cs-mosaic--mirror { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .cs-mosaic > .cs-cell:first-child, .cs-mosaic--mirror > .cs-cell:first-child { grid-column: 1 / -1; grid-row: 1; }
  .cs-mosaic > .cs-cell:not(:first-child), .cs-mosaic--mirror > .cs-cell:not(:first-child) { grid-column: auto; grid-row: 2; }
  .cs-mosaic > .cs-cell:first-child > .cs-frame { height: auto; aspect-ratio: var(--r, 0.75); max-height: 78svh; }
  .cs-mosaic > .cs-cell:not(:first-child) > .cs-frame { height: auto; aspect-ratio: 1; }
}

/* ==========================================================
   10. FAIXA ANIMADA E VÍDEO
   ========================================================== */
/* Faixa: marquee da fundação com uma tira de imagem sem emenda (ou texto) */
.cs-band {
  position: relative;
  overflow: hidden;
  background: var(--band-bg, var(--navy));
}
.cs-band .marquee { --marquee-gap: 0px; }
.cs-band .marquee img {
  display: block;
  flex: none;
  width: auto;
  height: var(--band-h, clamp(56px, 7.8vw, 150px));
  max-width: none;
}
/* faixa de texto (sem imagem): usa .marquee--display da fundação */
.cs-band .marquee--display { --marquee-gap: clamp(1.5rem, 3vw, 3rem); padding-block: 0.3em; }
.cs-band + .cs-band { margin-top: 0 !important; }

/* Vídeo: <video> nativo ou iframe (Vimeo) dentro da moldura */
.cs-video .cs-frame { background: #000; }
.cs-video__toggle {
  position: absolute;
  right: calc(var(--gutter) + 0.9rem);
  bottom: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(238, 238, 238, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(22, 26, 38, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-light);
  transition: border-color 0.4s, background-color 0.4s;
}
.cs-media--bleed .cs-video__toggle { right: 0.9rem; }
.cs-video__toggle:hover, .cs-video__toggle:focus-visible { border-color: var(--red); background: rgba(22, 26, 38, 0.9); }
.cs-video__toggle i { position: relative; width: 10px; height: 12px; }
.cs-video__toggle i::before, .cs-video__toggle i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.cs-video__toggle i::before { left: 1px; }
.cs-video__toggle i::after { right: 1px; }
.cs-video__toggle[data-state="paused"] i::before { left: 1px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.cs-video__toggle[data-state="paused"] i::after { content: none; }

/* ==========================================================
   11. GALERIA HORIZONTAL
   Padrão / sem JS / toque / movimento reduzido: faixa com
   rolagem lateral e snap. Com .is-pinned (JS, ≥1024px, GSAP):
   seção fixa e o trilho corre com a rolagem vertical.
   ========================================================== */
.cs-hs {
  position: relative;
  padding-block: var(--cs-y);
  background: var(--navy-2);
  border-block: 1px solid var(--line);
  --subtle: var(--gray-light);
  /* faixa: o item mais largo (--hs-rmax, calculado pelo case.js) cabe inteiro na área de
     snap; item mais largo que ela solta o snap e as setas andariam 40px por vez */
  --hs-h: min(clamp(250px, 58vw, 540px), calc((100vw - 2 * var(--gutter) - 1rem) / var(--hs-rmax, 1)));
}
.cs-hs__intro {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cs-hs__intro .cs-title { max-width: 12ch; }
.cs-hs__lead { max-width: 40ch; margin-top: 1.5rem; color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; }
.cs-hs__hint { display: none; }

.cs-hs__viewport {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -webkit-overflow-scrolling: touch;
}
.cs-hs__viewport:focus-visible { outline-offset: -2px; }
.cs-hs__viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.cs-hs__viewport.is-dragging * { pointer-events: none; }
.cs-hs__list {
  display: flex;
  gap: calc(var(--cs-gap) * 2);
  width: max-content;
  margin: 0;
  padding: 0 var(--gutter) 1.25rem;
  list-style: none;
}
.cs-hs__item { flex: none; width: calc(var(--hs-h) * var(--r, 1)); scroll-snap-align: start; }
.cs-hs__item figure { margin: 0; }
.cs-hs__item .cs-frame { aspect-ratio: var(--r, 1); }
.cs-hs__item .cs-cap { margin-top: 0.8rem; }

/* barra: rótulo, progresso, contador e setas */
.cs-hs__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 1.25rem auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
html:not(.js) .cs-hs__bar { display: none; }
.cs-hs__line { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.cs-hs__fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.cs-hs__count { min-width: 4.8em; font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: 0.06em; text-transform: none; text-align: right; color: var(--paper-light); }
.cs-hs__count b { font-weight: 400; color: var(--red-hi); }
.cs-hs__btns { display: flex; gap: 0.5rem; }
.cs-hs__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(238, 238, 238, 0.22);
  border-radius: 50%;
  color: var(--paper-light);
  transition: border-color 0.4s, color 0.4s, opacity 0.4s;
}
.cs-hs__btn:hover, .cs-hs__btn:focus-visible { border-color: var(--red); color: var(--red-hi); }
.cs-hs__btn[disabled] { opacity: 0.3; pointer-events: none; }
.cs-hs__btn--prev .arrow { transform: rotate(180deg); }

/* --- modo fixado (≥1024px, GSAP) --- */
.cs-hs.is-pinned {
  height: 100vh;
  height: 100svh;
  padding: calc(var(--nav-h) * 0.5) 0 calc(clamp(1.5rem, 5vh, 3rem) + 2.75rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  --hs-h: min(58vh, 640px);
}
.cs-hs.is-pinned .cs-hs__track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-right: 10vw;
  will-change: transform;
}
.cs-hs.is-pinned .cs-hs__intro {
  flex: none;
  width: min(34vw, 500px);
  max-width: none;
  margin: 0;
  padding: 0 4vw 0 0;
}
.cs-hs.is-pinned .cs-title { font-size: var(--fs-h2); }
.cs-hs.is-pinned .cs-hs__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
.cs-hs.is-pinned .cs-hs__hint .arrow { color: var(--red); }
.cs-hs.is-pinned .cs-hs__viewport { margin: 0; overflow: visible; scroll-snap-type: none; }
.cs-hs.is-pinned .cs-hs__list { padding: 0; gap: clamp(1.25rem, 2vw, 2rem); }
.cs-hs.is-pinned .cs-hs__item .cs-frame > img { will-change: translate; }
.cs-hs.is-pinned .cs-hs__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  margin: 0 auto;
  max-width: calc(var(--container) + var(--gutter) * 2);
}
@media (max-height: 720px) {
  .cs-hs.is-pinned { --hs-h: min(52vh, 640px); }
  .cs-hs.is-pinned .cs-hs__item .cs-cap { display: none; }
}

/* ==========================================================
   12. LIGHTBOX (montado pelo case.js)
   ========================================================== */
html.cs-lock { overflow: hidden; }
.cs-lb {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--paper);
}
.cs-lb[hidden] { display: none; }
.cs-lb__backdrop { position: absolute; inset: 0; background: rgba(14, 17, 26, 0.96); }
.cs-lb__top,
.cs-lb__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
}
.cs-lb__count { font-family: var(--serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--paper-light); }
.cs-lb__count b { font-weight: 400; color: var(--red-hi); }
.cs-lb__close {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 0.25rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-light);
  transition: color 0.4s;
}
.cs-lb__close:hover, .cs-lb__close:focus-visible { color: var(--red-hi); }
.cs-lb__x { position: relative; width: 18px; height: 18px; }
.cs-lb__x::before, .cs-lb__x::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.cs-lb__x::after { transform: rotate(-45deg); }
/* flex (não grid): assim o max-height: 100% da imagem resolve contra a altura do palco */
.cs-lb__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(1rem, 7vw, 7rem);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.cs-lb__fig { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; margin: 0; }
.cs-lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
.cs-lb__cap { max-width: 70ch; font-size: var(--fs-small); line-height: 1.55; color: var(--gray-light); }
.cs-lb__hint { flex: none; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }
.cs-lb__hint kbd { display: inline-block; min-width: 1.6em; padding: 0.1em 0.35em; margin: 0 0.15em; border: 1px solid var(--line); border-radius: 3px; font: inherit; text-align: center; }
.cs-lb__btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid rgba(238, 238, 238, 0.22);
  border-radius: 50%;
  background: rgba(22, 26, 38, 0.5);
  color: var(--paper-light);
  transition: border-color 0.4s, color 0.4s, background-color 0.4s;
}
.cs-lb__btn:hover, .cs-lb__btn:focus-visible { border-color: var(--red); color: var(--red-hi); background: rgba(22, 26, 38, 0.85); }
.cs-lb__btn--prev { left: clamp(0.5rem, 2vw, 2rem); }
.cs-lb__btn--next { right: clamp(0.5rem, 2vw, 2rem); }
.cs-lb__btn--prev .arrow { transform: rotate(180deg); }
@media (max-width: 767px) {
  .cs-lb__stage { padding: 0; }
  .cs-lb__btn { top: auto; bottom: 0.75rem; margin: 0; width: 48px; height: 48px; }
  .cs-lb__foot { padding-bottom: 4.5rem; }
  .cs-lb__hint { display: none; }
}
@media (hover: none) { .cs-lb__hint { display: none; } }

/* ==========================================================
   13. CHAMADA E PRÓXIMO CASE
   ========================================================== */
.cs-cta { position: relative; padding-block: var(--cs-y); border-top: 1px solid var(--line); text-align: center; }
.cs-cta .label { justify-content: center; }
.cs-cta__title {
  max-width: 15ch;
  margin: 1.5rem auto 0;
  font-size: clamp(2.4rem, 1.1rem + 4.4vw, 5.75rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.cs-cta__title em { font-style: italic; color: var(--accent); }
.cs-cta__actions { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.cs-cta .btn { min-height: 56px; padding-inline: 2.25rem; }

.cs-next {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4.5rem, 9vw, 8rem);
  background: var(--navy-2);
  border-top: 1px solid var(--line);
  overflow: hidden;
  --subtle: var(--gray-light);
}
.cs-next__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.cs-next__head .label .numeral { font-size: 1.05rem; text-transform: none; letter-spacing: 0.04em; }
.cs-next__card { position: relative; margin-top: clamp(2.5rem, 6vw, 5rem); }
.cs-next__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-light);
}
.cs-next__meta span:last-child { color: var(--paper); font-variant-numeric: tabular-nums; }
.cs-next__name {
  position: relative;
  z-index: 2;
  max-width: 11ch;
  margin-top: 1.25rem;
  font-size: clamp(3.25rem, 0.8rem + 11vw, 12.5rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
  transition: transform 1.1s var(--ease-expo);
}
.cs-next__name em { font-style: italic; color: var(--accent); }
.cs-next__link { color: var(--paper-light); }
/* o link do nome cobre o cartão inteiro */
.cs-next__link::after { content: ''; position: absolute; inset: 0; z-index: 4; }
.cs-next__link:focus-visible { outline: none; }
.cs-next__card:has(.cs-next__link:focus-visible) { outline: 1px solid var(--accent-text); outline-offset: 14px; }

/* imagem do próximo case: revela no hover (desktop). Presa pela base, acima da barra
   (44px + folga); o case.js limita o deslocamento vertical a -24/+20px, então ela nunca
   cobre "Ver o próximo case". Recorte 3:2 fixo no hover. */
.cs-next__media {
  position: absolute;
  right: 2%;
  bottom: 84px;
  z-index: 1;
  width: clamp(220px, 24vw, 400px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  pointer-events: none;
  background: var(--navy-3);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotate(var(--rot, 0deg));
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-in-out);
}
.cs-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.4s var(--ease-expo);
}
@media (hover: hover) and (pointer: fine) {
  .cs-next__card:hover .cs-next__media,
  .cs-next__card:focus-within .cs-next__media,
  .cs-next.is-complete .cs-next__media { clip-path: inset(0 0 0 0); }
  .cs-next__card:hover .cs-next__media img,
  .cs-next__card:focus-within .cs-next__media img,
  .cs-next.is-complete .cs-next__media img { transform: none; }
  .cs-next__card:hover .cs-next__name { transform: translateX(1.25rem); }
}
/* toque / telas menores: a imagem fica visível, no fluxo */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  .cs-next__media {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(100%, 560px);
    aspect-ratio: var(--r, 3 / 2);
    margin-top: 2rem;
    transform: none;
    clip-path: none;
  }
  .cs-next__media img { transform: none; }
}

/* barra que se preenche ao chegar ao fim do case (não navega sozinha) */
.cs-next__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
.cs-next__line { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.cs-next__fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
html:not(.js) .cs-next__fill { transform: scaleX(1); }
.cs-next__go { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; color: var(--paper-light); transition: color 0.5s; }
.cs-next__go .arrow { color: var(--red); }
.cs-next.is-complete .cs-next__go { color: var(--red-hi); }
.cs-next.is-complete .cs-next__go .arrow::before { transform: translateX(130%); }
.cs-next.is-complete .cs-next__go .arrow::after { transform: translateX(0); }
.cs-next.is-complete .cs-next__name em { text-shadow: 0 0 0.6em rgba(234, 61, 61, 0.25); }
.cs-next__card:hover .cs-next__go { color: var(--red-hi); }

/* ==========================================================
   14. MOVIMENTO REDUZIDO E IMPRESSÃO
   ========================================================== */
html.reduced-motion .cs-cue__line::after { animation: none; transform: none; }
html.reduced-motion .cs-next__name,
html.reduced-motion .cs-next__media,
html.reduced-motion .cs-next__media img { transition-duration: 0.01s; }
html.reduced-motion .cs-index__list { transition: none; }
html.reduced-motion .cs-index.is-open .cs-index__list { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-cue__line::after { animation: none; }
}

@media print {
  .cs-index, .cs-lb, .cs-hs__bar, .cs-cue, .cs-next__media, .cs-next__bar, .cs-video__toggle, .cs-band { display: none !important; }
  .cs-hero, .cs-hs, .cs-next, .cs-cta { background: #fff !important; border-color: #ccc; }
  .cs-hero { padding-top: 1rem; }
  .cs-hero__inner { opacity: 1 !important; transform: none !important; }
  .cs-hero__title, .cs-crumb a, .cs-meta dd, .cs-hero__lead { color: #161A26 !important; }
  .cs-meta::before, .cs-meta::after, .cs-pillar::before, .cs-pillar::after { transform: none !important; }
  .cs-cover__zoom, .cs-frame > img { transform: none !important; scale: none !important; translate: none !important; }
  .cs-frame { break-inside: avoid; }
  /* galeria fixada vira faixa comum na impressão */
  .cs-hs .pin-spacer { height: auto !important; padding: 0 !important; }
  .cs-hs.is-pinned { position: static !important; height: auto; display: block; padding-block: 2rem; transform: none !important; }
  .cs-hs.is-pinned .cs-hs__track { display: block; width: auto; padding: 0; transform: none !important; }
  .cs-hs.is-pinned .cs-hs__intro { width: auto; padding: 0 var(--gutter); }
  .cs-hs__viewport { overflow: visible !important; }
  .cs-hs__list { flex-wrap: wrap; width: auto !important; }
  .cs-hs { --hs-h: 180px !important; }
  .cs-pillar__num { color: #161A26 !important; -webkit-text-stroke: 0; }
  .cs-frame img.cs-wait { opacity: 1 !important; }
  .cs-next__name, .cs-next__link { color: #161A26 !important; }
  .cs-quote__text .and_sw { opacity: 1 !important; }
}