/* =========================================================
   Narro · página Cases (layout do print aprovado em 26/09)
   Fundo roxo com o case "em foco" desfocado; cabeçalho em branco; título, texto, "Em foco" e a fileira de trabalhos.
   Usa os tokens de style.css.
   ========================================================= */
body.page-cases{--bg:#1f0a33;--cs-base:#29103f;background:var(--bg);color:#fff}
.page-cases #smooth-content{position:relative}

/* cabeçalho em branco nesta página */
.page-cases .site-header,.page-cases .site-header .brand,.page-cases .brand__tagline,.page-cases .nav-toggle{color:#fff}

/* fundo: a imagem do case em foco, desfocada, com o roxo por cima (forte à esquerda, onde está o texto) */
/* o fundo desce além da primeira dobra e se dissolve no roxo da página: sem linha de divisão até a grade de todos os cases */
.cs-backdrop{position:absolute;left:0;right:0;top:0;height:calc(max(100svh,760px) + 45vh);overflow:hidden;z-index:0;pointer-events:none;background:var(--cs-base);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)}
.cs-backdrop__img{will-change:opacity,transform;position:absolute;left:-4vw;top:-4vw;width:calc(100% + 8vw);height:calc(100% + 8vw);max-width:none;object-fit:cover;object-position:70% 30%;filter:blur(9px) saturate(.95) brightness(.6);opacity:.8}
/* troca do fundo: duas camadas; a nova entra por cima com desfoque que assenta */
.cs-backdrop__img.is-next{opacity:0}
.cs-backdrop__tint{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(41,16,63,.96) 0%,rgba(41,16,63,.88) 30%,rgba(41,16,63,.4) 60%,rgba(41,16,63,.25) 100%),
  linear-gradient(180deg,rgba(31,10,51,0) 45%,rgba(31,10,51,.6) 75%,var(--bg) 100%)}

/* dobra 1 */
.cs{position:static}
.cs-feature{position:relative;z-index:1}
.page-cases .site-header{z-index:20}
/* a dobra ocupa a tela inteira; no pé dela, o indicador "Ver mais cases" (.cs-scroll) */
.cs-feature{min-height:calc(max(100svh,760px) - clamp(70px,9vh,110px));display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(20px,4vh,52px);padding-bottom:calc(clamp(76px,10vh,112px) + clamp(34px,2.5vw,56px))}   /* 09/10/2026: + o que os cards subiram, para "Explore os trabalhos" ficar no mesmo lugar */
.cs-kicker{font-size:clamp(11px,.94vw,17px);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.cs-feature__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cs-feature__title{margin-top:clamp(18px,3vh,40px);font-size:clamp(40px,4.2vw,82px);line-height:1.1;letter-spacing:-.02em;font-weight:300;color:#fff}
.cs-feature__title span{display:block;white-space:nowrap}
.cs-feature__title strong{font-weight:700;letter-spacing:-.03em}
.cs-feature__title em{font-style:normal;color:var(--green)}
.cs-feature__text{width:min(780px,44vw);margin-top:clamp(20px,3.5vh,44px);font-size:clamp(15px,1.15vw,22px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.92)}
.cs-focus{flex:none;width:clamp(200px,17vw,330px);margin-right:clamp(0px,7vw,190px);padding-bottom:4px}
.cs-focus .cs-kicker{font-size:clamp(10px,.84vw,16px)}
.cs-focus__name{margin-top:clamp(8px,1.4vh,16px);font-size:clamp(28px,2.7vw,52px);font-weight:700;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.cs-focus__cat{margin-top:clamp(10px,1.6vh,18px);font-size:clamp(13px,1.05vw,20px);font-weight:300;color:rgba(255,255,255,.75)}
/* fato positivo do cliente (fonte pública, ver LEIA-ME) */
.cs-focus__fact{max-width:30ch;margin-top:clamp(12px,1.8vh,20px);font-size:clamp(12px,.86vw,15px);font-weight:300;line-height:1.5;color:rgba(255,255,255,.9)}

/* fileira de trabalhos */
.cs-feature__works{margin-top:clamp(28px,4.5vh,64px)}
.cs-works{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(12px,1.35vw,26px);margin-top:clamp(22px,1.9vw,40px);align-items:end}   /* 09/10/2026: mais perto de "Explore os trabalhos" (era clamp(56px,4.4vw,96px), espaço para o card crescer sem cobrir o rótulo; agora o card ampliado pode passar por cima do rótulo) */
.cs-work{position:relative}
.cs-work.is-up{z-index:5}
.cs-work .case__btn{display:block;width:100%;aspect-ratio:16/9;overflow:visible;background:none;cursor:pointer}
/* o card cresce a partir da base (os das pontas, a partir do canto), sem distorção: escala uniforme via GSAP (cases.js) */
.cs-work{will-change:transform}
.cs-work .case__media{position:absolute;inset:0;display:block;overflow:hidden;background:#1d0039;transform-origin:50% 100%;will-change:transform;backface-visibility:hidden}
.cs-work.is-up .case__media{box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.cs-work .case__img{filter:none}
.cs-work__name{display:block;margin-top:clamp(12px,2.4vh,26px);font-size:clamp(14px,1.25vw,24px);font-weight:300;letter-spacing:-.005em;color:#fff;transition:color .45s ease}
.cs-work.is-on .cs-work__name{color:var(--green);font-weight:500}
/* "Ver mais cases": no pé da primeira tela, só a bolinha verde-limão, centralizada, com a setinha descendo sem parar. Clique rola até #todos (cases.js) */
.cs-scroll{position:absolute;left:0;right:0;bottom:clamp(30px,5vh,56px);   /* 09/10/2026: subiu (era clamp(14px,2.2vh,26px)) */
width:max-content;margin-inline:auto;display:flex;align-items:center;gap:12px;padding:6px;color:#fff;text-decoration:none;z-index:2}
.cs-scroll__dot{position:relative;flex:none;display:grid;place-items:center;width:clamp(32px,2.3vw,40px);aspect-ratio:1;border-radius:50%;background:var(--green);overflow:hidden;transition:transform .5s var(--ease-out)}
.cs-scroll__dot svg{width:44%;height:44%;fill:none;stroke:var(--purple-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:csArrow 1.9s cubic-bezier(.65,0,.35,1) infinite}
/* a setinha desce, sai por baixo da bolinha e volta por cima, com um respiro parada no centro */
@keyframes csArrow{0%,30%{transform:translateY(0)}48%{transform:translateY(135%)}48.01%{transform:translateY(-135%)}70%{transform:translateY(0)}80%{transform:translateY(12%)}90%,100%{transform:translateY(0)}}
.cs-scroll:is(:hover,:focus-visible) .cs-scroll__dot{transform:scale(1.1)}
/* 14/10/2026 (pedido do Anderson): "Role para ver mais" ao lado da setinha (clicar também desce). No passar do mouse a bolinha muda de cor
   como o play da home; aqui o fundo já é roxo-escuro, então vai do verde para o BRANCO com a seta roxa (o roxo sumiria no fundo) */
.cs-scroll__txt{font-size:10px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;line-height:1;opacity:.85;transition:opacity .4s var(--ease-out)}
.cs-scroll__dot{transition:transform .5s var(--ease-out),background-color .45s var(--ease-out)}
.cs-scroll__dot svg{transition:stroke .45s var(--ease-out)}
.cs-scroll:is(:hover,:focus-visible,:active) .cs-scroll__dot{background:#fff}
.cs-scroll:is(:hover,:focus-visible,:active) .cs-scroll__dot svg{stroke:var(--purple)}
.cs-scroll:is(:hover,:focus-visible) .cs-scroll__txt{opacity:1}
@media(prefers-reduced-motion:reduce){.cs-scroll__dot svg{animation:none}}
.cs-all-link{display:flex;align-items:center;gap:14px;width:max-content;margin:clamp(40px,7.5vh,90px) clamp(0px,6.5vw,128px) 0 auto;font-size:clamp(11px,.84vw,16px);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.cs-all-link i{position:relative;width:34px;height:1px;background:var(--green);transition:width .5s var(--ease-out)}
.cs-all-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid var(--green);border-bottom:1px solid var(--green);transform:rotate(-45deg)}
.cs-all-link:hover{color:var(--green)}
.cs-all-link:hover i{width:48px}

@media(max-width:900px){
  .cs-backdrop__img{filter:none}   /* 12/10/2026: a imagem já vem desfocada e escurecida (case-XX-bg.webp) */
  /* 15/10/2026: fundo do celular como no desktop. case-XX-bg.webp agora é uma faixa em pé (480×1290) com o desfoque do desktop;
     o roxo por cima fica por igual (no celular o texto ocupa a largura toda), mais leve, para a imagem aparecer */
  .cs-backdrop__img{object-position:50% 50%}
  .cs-backdrop__tint{z-index:3;background:   /* z-index: a imagem que entra na troca (z 2) não pode passar por cima do roxo */
    linear-gradient(180deg,rgba(41,16,63,.6) 0%,rgba(41,16,63,.38) 40%,rgba(41,16,63,.46) 62%,rgba(31,10,51,.72) 82%,var(--bg) 100%)}
  /* celular: tudo mais junto; a fileira vira uma esteira que roda sozinha (cases.js) e o card do centro é o "Em foco" */
  .cs-backdrop{height:calc(100svh + 30vh)}
  .cs-feature{min-height:0;justify-content:flex-start;padding-top:clamp(20px,3.5vh,32px);padding-bottom:clamp(28px,5vh,44px)}
  .cs-feature__top{flex-direction:column;align-items:flex-start;gap:26px}
  .cs-feature__title{margin-top:14px;font-size:clamp(34px,9.6vw,46px);line-height:1.1}
  .cs-feature__title span{white-space:normal}
  .cs-feature__text{width:100%;margin-top:16px;font-size:15px;line-height:1.6;letter-spacing:.005em}
  .cs-feature__text{display:none}   /* 14/10/2026 (pedido do Anderson): no celular o texto de abertura some; Em foco e a esteira sobem e já se vê o resto da página */
  .cs-focus{width:auto;margin-right:0}
  .cs-focus__name{margin-top:8px;font-size:clamp(22px,6.3vw,29px)}   /* 15/10/2026: 15% menor no celular (pedido do Anderson) */
  .cs-focus__cat{margin-top:6px;font-size:13px}
  .cs-focus__fact{font-size:13px;max-width:34ch}
  .cs-feature__works{width:100%;margin-top:34px;margin-inline:0;overflow:visible}   /* 14/10/2026: visível, para o gesto de arrastar ao lado do rótulo não ser cortado (a esteira tem a própria rolagem) */
  .cs-feature__works > .cs-kicker{padding-inline:var(--gutter)}
  .cs-scroll{position:static;margin:26px var(--gutter) 0}   /* 14/10/2026: "Role para ver mais" volta no celular, logo abaixo da esteira (antes ficava escondido) */
  .cs-works{display:flex;width:max-content;gap:0;margin-top:16px;padding:14px 0 4px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  /* 15/10/2026: rede de segurança. A fileira nunca alarga a página, mesmo antes do cases.js montar a esteira (no Safari, página mais larga que a tela = site inteiro afastado) */
  .cs-works:not(.is-native){width:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cs-works:not(.is-native)::-webkit-scrollbar{display:none}
  .cs-feature{overflow-x:hidden;overflow-x:clip}
  /* 12/10/2026: rolagem nativa (encaixe no centro, até o último card) */
  /* 14/10/2026 (aprovado pelo Anderson, opção A do teste): um case por vez, de ponta a ponta da tela (100% da largura) */
  .cs-works.is-native{width:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:auto;scrollbar-width:none;
    padding-left:0;padding-right:0;scroll-padding-left:0;transform:none!important}
  .cs-works.is-gliding{scroll-snap-type:none}   /* o deslize automático não pode brigar com o encaixe */
  .cs-works.is-native::-webkit-scrollbar{display:none}
  .cs-works.is-native .cs-work{scroll-snap-align:start;scroll-snap-stop:normal}
  .cs-work{flex:0 0 100vw;max-width:none}
  .cs-work__name{margin-top:12px;padding-inline:var(--gutter);font-size:17px}
  .cs-work img{-webkit-user-drag:none;pointer-events:none}
  .cs-todos{padding-top:8px}

  /* 14/10/2026 · barrinhas de tempo embaixo da esteira (uma por case; a do case da vez enche durante a parada) */
  .cs-bars{display:flex;gap:6px;margin:16px var(--gutter) 0}
  .cs-bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;position:relative}
  .cs-bars i::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:0 50%}
  .cs-bars i.is-done::after{transform:scaleX(1)}
  .cs-bars i.is-run::after{transform:scaleX(1);transition:transform var(--cs-pausa,1.5s) linear}

  /* 14/10/2026 · gesto ao lado de "Explore os trabalhos": ENSINA o swipe. A ponta do dedo (bolinha verde) aparece na margem
     direita, aperta a tela (afunda e solta uma onda), arrasta para a esquerda deixando um rastro e levanta. Ciclo de 2,8 s.
     Só transform e opacidade, para não travar. O elemento é criado pelo cases.js (só no celular). */
  .cs-feature__works > .cs-kicker{display:flex;align-items:center;overflow:visible;padding-block:8px;margin-block:-8px}
  .cs-swipe{display:block;position:relative;margin-left:auto;margin-right:6px;width:16px;height:16px;flex:none}
  .cs-swipe__dot,.cs-swipe__trail{position:absolute;top:0;right:0;height:16px;border-radius:8px;will-change:transform,opacity}
  .cs-swipe__dot{width:16px;background:var(--green);box-shadow:0 0 0 5px rgba(101,214,0,.18);opacity:0;animation:csTouch 2.8s infinite}
  .cs-swipe__dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);opacity:0;animation:csRipple 2.8s infinite}
  .cs-swipe__trail{width:84px;background:linear-gradient(90deg,rgba(101,214,0,0),rgba(101,214,0,.32));transform-origin:100% 50%;transform:scaleX(.19);opacity:0;animation:csTrail 2.8s infinite}
}
@keyframes csTouch{
  0%{opacity:0;transform:translate3d(0,0,0) scale(1.25);animation-timing-function:ease-out}
  12%{opacity:1;transform:translate3d(0,0,0) scale(1.15);animation-timing-function:cubic-bezier(.5,0,.3,1)}
  22%{opacity:1;transform:translate3d(0,0,0) scale(.82);animation-timing-function:ease-in-out}
  30%{transform:translate3d(0,0,0) scale(.86);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  66%{opacity:1;transform:translate3d(-68px,0,0) scale(.86);animation-timing-function:ease-out}
  78%,100%{opacity:0;transform:translate3d(-68px,0,0) scale(1.2)}}
@keyframes csRipple{0%,20%{opacity:0;transform:scale(.9)}23%{opacity:.75;transform:scale(1)}40%,100%{opacity:0;transform:scale(2.2)}}
@keyframes csTrail{
  0%,30%{opacity:0;transform:scaleX(.19);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  34%{opacity:1}
  66%{opacity:1;transform:scaleX(1)}
  84%,100%{opacity:0;transform:scaleX(1)}}
/* 15/10/2026: o gesto anima também com "Reduzir movimento" ligado (pedido do Anderson: o sócio usa e não via o gesto) */


/* DOBRA 2 · todos os cases: a grade grande da home, de ponta a ponta */
.cs-todos{position:relative;z-index:1;background:transparent;padding-top:clamp(40px,7vh,90px);padding-bottom:0}
.cs-todos__head{margin-bottom:clamp(22px,4vh,40px)}

/* entrada: nada aparece pronto antes da animação */
html.cs-wait .cs-feature,html.cs-wait .page-cases .site-header .container,html.cs-wait .cs-backdrop{visibility:hidden}
.cs-ch{display:inline-block;will-change:transform}
.cs-focus__name{white-space:nowrap}