/* ============================================================
   CASES — headline + grid de 3 projetos
   ============================================================ */
/* Projetos reais desenvolvidos no estúdio */
/* ---------- a seção saiu do centro ----------
   Ela era o único bloco centralizado da página: rótulo centrado, manchete
   centrada em caixa alta espacejada e um parágrafo centrado. O eixo desta
   página é a margem esquerda do começo ao fim, e centralizar um bloco no
   meio dela não cria destaque, cria desalinho.

   A manchete também deixou de ser manchete disfarçada de rótulo: era
   Inter 700 a 16px com .28em de espacejamento, ou seja, tinha a forma de
   uma etiqueta e o trabalho de um título. Agora é display condensada de
   verdade, no tamanho que o assunto merece. */
.cases__eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:16px;
}
.cases__eyebrow::before{content:"";flex:none;width:20px;height:2px;background:var(--green)}
.cases__head{
  font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,6vw,3.4rem);letter-spacing:-.03em;line-height:1;
  max-width:20ch;margin-bottom:0;
}
.cases__intro{
  max-width:56ch;margin:20px 0 clamp(40px,6vw,72px);
  font-size:clamp(.95rem,3.6vw,1.1rem);
  line-height:1.55;color:var(--ink-soft);
}
/* ---------- a grade conta os casos sozinha ----------
   Era `repeat(3, 1fr)` fixo, e a /landing-page mostra DOIS: com a regra
   antiga eles ocupavam dois terços da largura e sobrava uma coluna vazia
   à direita, que lê como card que não carregou.
   Com `auto-fit` a conta é do navegador: dois casos ocupam metade cada,
   três ocupam um terço, e nenhuma das duas páginas precisa saber da
   outra. */
.cases__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(40px,7vw,72px);max-width:1300px;margin-inline:auto;
}
@media(min-width:760px){
  .cases__grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,3.4vw,56px)}
}

/* ============================================================
   O APARELHO PASSOU A POUSAR NO PAPEL (14/08)

   Cada caso vinha dentro de um painel grafite de proporção 4/5, com o
   celular flutuando no meio: é a foto de produto que toda página de
   agência tem, e ela não pertence a esta casa. O painel também competia
   com a sala grafite do /portfolio e com as seções escuras daqui, sem
   ser nenhuma das duas.

   Agora o aparelho pousa direto no papel, com a sombra dura da
   /vitrine-digital: um bloco sólido em `--paper-2` deslocado, com um fio
   de tinta contornando ele. Não é sombra de luz, é sombra de OBJETO
   IMPRESSO, e é a mesma que o celular do "como funciona" de lá usa.

   O `overflow` teve que sair junto: ele cortava a sombra, que por
   definição vive fora da caixa.
   ============================================================ */
/* O teto de largura não é capricho: com três casos cada coluna dá uns
   400px e o aparelho nasce no tamanho certo, mas com DOIS a coluna passa
   de 600px e o celular vira um outdoor de tela inteira, mais alto que a
   dobra. O teto faz as duas contagens caírem no mesmo tamanho de
   aparelho, e é a legenda embaixo que ocupa a largura toda da coluna. */
.case__media{aspect-ratio:4/5;background:transparent;max-width:min(100%,400px)}
.case__media img{width:100%;height:100%;object-fit:cover}
.case__placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:var(--ink);
  color:rgba(255,255,255,.85);
}
.case__placeholder span{
  font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.1rem,4vw,1.5rem);letter-spacing:-.02em;line-height:1;
}
/* —— Vídeo dentro de mockup de iPhone —— */
.case__stage{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,28px) clamp(28px,4vw,44px) clamp(28px,4vw,40px) clamp(8px,1.4vw,16px);
  /* Sem fundo: o que sustenta o aparelho agora é a sombra dele, não uma
     caixa atrás. O respiro assimétrico acima existe para a sombra caber
     à direita e embaixo sem encostar no card vizinho. */
  background:transparent;
}
.phone{
  position:relative;height:100%;aspect-ratio:392/800;max-width:100%;
  padding:9px;                             /* espessura da moldura */
  background:linear-gradient(160deg,#2a2a2e,#131315);
  border-radius:clamp(30px,4.5vw,44px);
  /* O brilho interno de titânio fica: ele é o material do aparelho, e
     material autêntico é a regra da casa. O que muda é a sombra de fora,
     que deixa de ser desfoque de luz e vira o bloco sólido deslocado com
     fio de tinta, igual ao `.phoneSmall` da /vitrine-digital. */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.09), /* brilho da borda de titânio */
    14px 18px 0 var(--paper-2),
    14px 18px 0 1.5px var(--ink);
}
.phone__screen{
  width:100%;height:100%;overflow:hidden;background:#000;
  border-radius:clamp(22px,3.6vw,36px);
  display:flex;flex-direction:column;
}
/* Barra de status (horário + sinal/wifi/bateria) — o vídeo começa abaixo dela,
   então o header da página gravada aparece inteiro */
.phone__statusbar{
  flex:none;height:8.5%;min-height:26px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 11%;background:var(--off-white);color:var(--black);
}
.phone__time{font-family:var(--font-body);font-weight:600;font-size:clamp(8px,2vw,11px);letter-spacing:.02em}
.phone__icons{height:34%;min-height:9px;width:auto;display:block}
.phone__screen video{flex:1;min-height:0;width:100%;object-fit:cover;display:block}
/* Captura de página inteira que rola sozinha dentro do iPhone (topo → rodapé → topo).
   Roda só com o card visível (.is-inview, via js/lib/videos.js). */
.phone__feed{flex:1;min-height:0;overflow:hidden;container-type:size}
/* o <picture> é inline por padrão e deixaria um vão de linha de base
   embaixo da captura dentro do aparelho */
.phone__feed picture{display:block}
.phone__feed img{
  display:block;width:100%;height:auto;
  animation:case-scroll 20s linear infinite alternate;
  animation-play-state:paused;
}
.case.is-inview .phone__feed img{animation-play-state:running}
/* Defasa cada card para as rolagens não ficarem sincronizadas */
.cases__grid .case:nth-child(2) .phone__feed img{animation-delay:.5s}
.cases__grid .case:nth-child(3) .phone__feed img{animation-delay:1s}
@keyframes case-scroll{
  0%,2%{transform:translateY(0)}
  98%,100%{transform:translateY(min(0px,calc(100cqh - 100%)))}
}
@media (prefers-reduced-motion:reduce){.phone__feed img{animation:none}}
.phone__island{
  position:absolute;top:calc(9px + 8px);left:50%;transform:translateX(-50%);
  width:24%;height:clamp(12px,2vw,18px);
  background:#000;border-radius:999px;z-index:2;
}

.case__cat{
  display:flex;align-items:center;gap:10px;
  margin-top:20px;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.case__cat::before{content:"";flex:none;width:18px;height:2px;background:var(--green)}
/* Rótulo opcional acima do título (config: tag) */
.case__tag{
  display:inline-block;margin-top:12px;padding:5px 10px;
  border:1px solid var(--line);border-radius:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
}
/* Mesma medida dos nomes de cliente no /portfolio: condensada em peso
    900, caixa MISTA. Caixa alta apagaria a grafia própria das marcas. */
.case__name{margin-top:9px;font-family:var(--font-display);font-stretch:78%;font-weight:900;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.04;letter-spacing:-.018em}
.case__result{margin-top:9px;font-size:clamp(.95rem,1.2vw,1.02rem);color:var(--ink-soft);line-height:1.5;max-width:38ch}

/* CTA da seção — mesma linguagem mono do resumo do processo */
.cases__ctawrap{margin-top:clamp(40px,6vw,64px)}
.cases__cta{
  display:inline-flex;align-items:center;gap:12px;padding:8px 4px;
  font-family:var(--font-mono);font-weight:700;font-size:clamp(12px,3.2vw,14px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-dark);
  transition:color .2s;
}
.cases__cta .arrow{transition:transform .2s}
@media(hover:hover) and (pointer:fine){.cases__cta:hover{color:var(--ink)}}
.cases__cta:hover .arrow{transform:translateX(4px)}

/* ============================================================
   A FICHA DO PROJETO (só a /landing-page, desde 11/09/2026)

   A grade de duas colunas deixava dois aparelhos soltos com meia tela de
   vazio no meio, e a legenda embaixo DESCREVIA a página. A manchete da
   seção promete "uma tarefa só", então cada projeto agora diz a sua, em
   corpo de manchete, ao lado do aparelho: aparelho à esquerda, ficha à
   direita, filete de tinta entre os projetos, como uma linha de
   inventário do /portfolio. O aparelho encolhe para o tamanho de uma
   ilustração de ficha, e não de um outdoor.

   O "A TAREFA" é rótulo de estrutura, não enfeite: ele nomeia o campo
   que a manchete da seção prometeu. Tudo vem DEPOIS do componente.
   ============================================================ */
.cases__grid--ficha{display:block;max-width:none;margin-inline:0}
.cases__grid--ficha .case--ficha{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,28px);
  padding-block:clamp(28px,4.4vw,52px);border-top:1.5px solid var(--ink);
}
.cases__grid--ficha .case--ficha:last-child{border-bottom:1.5px solid var(--ink)}
.case--ficha .case__media{max-width:min(100%,250px)}
.case__ficha{align-self:center;max-width:52ch}
.case--ficha .case__cat{margin-top:0}
.case--ficha .case__name{margin-top:10px;font-size:clamp(1.25rem,1.6vw,1.5rem)}
.case__rotulo{
  display:block;margin-top:clamp(18px,2.4vw,26px);
  font-family:var(--font-mono);font-weight:700;font-size:9.5px;
  letter-spacing:.18em;color:var(--green-dark);
}
.case__tarefa{
  margin-top:6px;
  font-family:var(--font-display);font-stretch:62%;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:.94;letter-spacing:-.03em;color:var(--ink);
  max-width:16ch;
}
.case--ficha .case__result{margin-top:12px;max-width:40ch}
.case__link{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:6px 0;
  font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  color:var(--green-dark);border-bottom:1.5px solid var(--green);
  transition:color .2s,border-color .2s;
}
.case__link .arrow{transition:transform .2s}
@media(hover:hover) and (pointer:fine){
  .case__link:hover{color:var(--ink);border-color:var(--ink)}
  .case__link:hover .arrow{transform:translateX(3px)}
}
@media(min-width:760px){
  .cases__grid--ficha .case--ficha{
    grid-template-columns:minmax(220px,300px) minmax(0,1fr);
    column-gap:clamp(32px,5vw,80px);align-items:center;
  }
  .case--ficha .case__media{max-width:300px}
}
/* a manchete da seção fecha mais perto da primeira ficha sem a intro */
.cases__grid--ficha{margin-top:clamp(28px,4.4vw,48px)}