*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--cream);font-family:var(--font);overflow-x:hidden;}
img{display:block;max-width:100%;}

.case-main{padding-top:96px;}
.case-shell{width:min(1240px,90vw);margin-inline:auto;}

.case-hero{padding:clamp(72px,10vw,150px) 0 clamp(48px,7vw,90px);}
.case-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(54px,9vw,110px);color:var(--cream-50);font-size:14px;text-decoration:none;transition:color .2s ease;}
.case-back:hover{color:var(--cream);}
.case-kicker{display:block;margin-bottom:18px;color:var(--red-edge);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.case-title{max-width:1050px;font-size:clamp(64px,13vw,176px);font-weight:800;letter-spacing:-.04em;line-height:.78;text-transform:uppercase;}
.case-title--long{max-width:none;font-size:clamp(56px,7.6vw,110px);line-height:.82;}
.case-title__line{display:block;white-space:nowrap;word-spacing:.08em;}
.case-hero__bottom{display:grid;gap:48px;margin-top:clamp(64px,10vw,130px);}
.case-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;}
.case-meta__item dt{display:block;margin-bottom:8px;color:var(--cream-30);font-size:12px;}
.case-meta__item dd,.case-meta__item a{color:var(--cream);font-size:14px;font-weight:500;text-decoration:none;}
.case-meta__item a{border-bottom:1px solid var(--cream-30);}
.case-intro{max-width:580px;font-size:clamp(18px,2vw,26px);font-weight:400;letter-spacing:-.025em;line-height:1.35;color:var(--cream-90);}
/* O botão mora junto da ficha técnica, não pendurado embaixo do parágrafo:
   "onde ver" é a mesma natureza de informação que categoria, ano e entregas.
   Com o align-items:end da linha, as duas colunas fecham na mesma base. */
.case-hero__data{display:grid;justify-items:start;gap:clamp(30px,4vw,42px);}
.case-live{margin-top:clamp(30px,4vw,42px);}

.case-media{position:relative;overflow:hidden;border:1px solid var(--cream-10);border-radius:clamp(18px,2vw,28px);background:var(--surface-1);}
.case-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 32%,rgba(212,64,42,.08));}
.case-media img,.case-media video{display:block;width:100%;height:100%;object-fit:cover;}
.case-cover{aspect-ratio:16/9;}

.case-section{padding:clamp(90px,13vw,180px) 0 0;}
.case-copy{max-width:780px;}
.case-eyebrow{color:var(--red-edge);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.case-heading{margin-top:28px;max-width:780px;font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance;}
.case-text{max-width:680px;color:var(--cream-50);font-size:clamp(16px,1.35vw,19px);font-weight:300;letter-spacing:-.015em;line-height:1.65;}
.case-heading + .case-text{margin-top:28px;}
.case-text + .case-text{margin-top:18px;}

.case-split{display:grid;gap:28px;margin-top:clamp(48px,7vw,82px);}
.case-split .case-media{aspect-ratio:4/5;}
.case-split .case-media:nth-child(2) img{object-position:70% center;}
.case-wide{margin-top:clamp(48px,7vw,82px);aspect-ratio:16/8;}

.case-showcase{display:grid;gap:28px;margin-top:clamp(48px,7vw,82px);}
.case-showcase__item{display:grid;gap:14px;align-content:start;}
.case-showcase__desk{aspect-ratio:3/2;}
.case-showcase__mob{aspect-ratio:4/5;}

/* Etiqueta de identificação. Fica FORA do quadro do vídeo — por cima ela
   cobria o header da página gravada, justo a parte que interessa. O ponto
   só pisca enquanto o vídeo está rodando; quando pausa, ele apaga junto. */
.case-tag{display:flex;align-items:center;gap:9px;
  color:var(--cream-50);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;}
.case-tag__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--cream-30);transition:background .3s;}
.is-playing .case-tag__dot{background:var(--red-edge);box-shadow:0 0 0 0 rgba(224,31,46,.6);animation:tagPulse 2s var(--spring) infinite;}
@keyframes tagPulse{
  0%  {box-shadow:0 0 0 0 rgba(224,31,46,.55);}
  70% {box-shadow:0 0 0 7px rgba(224,31,46,0);}
  100%{box-shadow:0 0 0 0 rgba(224,31,46,0);}
}

/* Trilha de progresso: 2px na base do card. Não é um player — é só um
   sinal de que aquilo é um percurso com começo e fim, não um GIF de 3s. */
.case-showcase .case-media::before{content:"";position:absolute;z-index:2;left:0;bottom:0;height:2px;
  width:calc(var(--p,0) * 100%);background:var(--red-edge);opacity:.85;
  transition:width .25s linear;pointer-events:none;}

/* CAPÍTULOS — os dois minutos viram um índice navegável. Os nomes são os
   da própria página gravada, então a régua também conta a arquitetura
   dela pra quem só bate o olho e não assiste nada. */
.case-chapters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.case-chapter{display:inline-flex;align-items:baseline;gap:9px;padding:9px 15px;
  border:1px solid var(--cream-10);border-radius:999px;background:transparent;
  color:var(--cream-50);font-family:var(--font);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;cursor:pointer;
  transition:color .25s var(--spring),border-color .25s var(--spring),background .25s var(--spring);}
.case-chapter span{color:var(--cream-30);font-variant-numeric:tabular-nums;letter-spacing:0;transition:color .25s;}
.case-chapter:hover{border-color:var(--cream-30);color:var(--cream-90);}
.case-chapter:hover span{color:var(--cream-50);}
.case-chapter[aria-current="true"]{border-color:rgba(224,31,46,.55);background:rgba(224,31,46,.10);color:var(--cream);}
.case-chapter[aria-current="true"] span{color:var(--red-edge);}
.case-chapter:focus-visible{outline:2px solid var(--red-edge);outline-offset:3px;}

/* Micro-loop de cada princípio: o trecho exato da navegação que prova o
   que o parágrafo ao lado está afirmando. Em 16/9 (a gravação é 3/2) o
   object-fit come justamente a tarja vermelha de cima e de baixo — o
   quadro fica mais apertado e a linha não vira um bloco de 300px. */
.case-principle__loop{aspect-ratio:16/9;}

.case-principles{display:grid;gap:1px;margin-top:clamp(50px,7vw,86px);border-top:1px solid var(--cream-10);}
.case-principle{display:grid;gap:18px;padding:30px 0;border-bottom:1px solid var(--cream-10);}
.case-principle__num{color:var(--red-edge);font-size:12px;font-weight:600;}
.case-principle h3{font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.03em;}
.case-principle p{max-width:560px;color:var(--cream-50);font-size:15px;line-height:1.55;}

.case-quote{margin-top:clamp(50px,7vw,86px);padding:clamp(30px,5vw,64px);border:1px solid var(--cream-10);border-radius:24px;background:linear-gradient(145deg,var(--surface-2),var(--surface-1) 62%,var(--black-deep));}
.case-quote blockquote{max-width:980px;font-size:clamp(25px,4vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1.08;}
.case-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:30px;color:var(--cream-50);font-size:13px;}
.case-quote img{width:42px;height:42px;border-radius:50%;object-fit:cover;}

.case-next{padding:clamp(120px,16vw,220px) 0;}
.case-next__head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:48px;}
.case-next__title{font-size:clamp(44px,7vw,88px);font-weight:700;letter-spacing:-.045em;line-height:.95;}
.case-next__grid{display:grid;gap:34px;}
.case-next__card{color:inherit;text-decoration:none;}
.case-next__thumb{overflow:hidden;aspect-ratio:3/2;margin-bottom:18px;border:1px solid var(--cream-10);border-radius:18px;background:var(--surface-1);}
.case-next__thumb img{width:100%;height:100%;object-fit:cover;}
.case-next__card h3{font-size:clamp(24px,2.5vw,34px);font-weight:600;letter-spacing:-.03em;}
.case-next__card p{margin-top:5px;color:var(--cream-50);font-size:14px;}

@media(min-width:760px){
  .case-hero__bottom{grid-template-columns:.9fr 1.1fr;align-items:end;}
  .case-meta{grid-template-columns:repeat(3,minmax(0,1fr));}
  .case-split,.case-next__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* 1.875 não é chute: é a razão que faz 3/2 e 4/5 fecharem na MESMA
     altura, então as duas etiquetas caem na mesma linha. */
  .case-showcase{grid-template-columns:minmax(0,1.875fr) minmax(0,1fr);align-items:start;}
  /* min-content na coluna do título: "Desenvolvimento" é uma palavra só e
     não quebra, então com minmax(0,…) ela estourava a coluna e comia o gap
     inteiro, encostando no parágrafo. Assim a coluna nunca fica menor que
     a palavra mais longa. */
  .case-principle{grid-template-columns:56px minmax(min-content,.78fr) minmax(0,.92fr) minmax(0,.82fr);
    gap:26px 32px;align-items:start;}
}

@media(max-width:767px){
  .case-main{padding-top:72px;}
  .case-title{line-height:.84;}
  /* As linhas longas continuam inteiras, como na direção original, mas
     cabem até em 320px sem empurrar navbar e página para fora da tela. */
  .case-title--long{font-size:clamp(27px,8.2vw,38px);line-height:.84;}
  .case-wide{aspect-ratio:4/3;}
  .case-showcase__item--mob{max-width:340px;margin-inline:auto;justify-items:center;}
  .case-next__head{align-items:start;flex-direction:column;}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}