/* Páginas de case (/trabalhos e /trabalhos/<case>). Gerado junto com tools/build-cases.py.
   A moldura é da Sprint (site.css); cada case troca só as cores, pelas variáveis --c-*. */
.cs{--c-bg:#07080d;--c-panel:#11131c;--c-acc:#7e53fa;--c-grad:var(--grad);--c-ink:#000}
.cs section,.cs footer{--bg:var(--c-bg)}
.cs .dark{--bg:var(--c-bg)}
.cs-cognara{--c-bg:#070b1a;--c-panel:#0e1530;--c-acc:#6aa8ff;--c-grad:linear-gradient(90deg,#2f6bff 0%,#5ec8ff 45%,#a46bff 100%)}
.cs-t3hub{--c-bg:#0a0811;--c-panel:#171226;--c-acc:#d94cf2;--c-grad:linear-gradient(90deg,#e23df0 0%,#a35bff 50%,#2f9dff 100%)}
.cs-pluscrm{--c-bg:#0e161c;--c-panel:#16232b;--c-acc:#55e3a8;--c-grad:linear-gradient(90deg,#55e3a8 0%,#7ff0c2 100%)}
.cs-m3{--c-bg:#0b1017;--c-panel:#16223a;--c-acc:#ffb230;--c-grad:linear-gradient(90deg,#ffb230 0%,#ffc95e 100%)}
.acc{padding:.18em 0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--c-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-acc);margin:0 0 1.4rem}
.eyebrow span{color:var(--muted);margin:0 .6rem}

/* abertura */
.ch{position:relative;padding:clamp(110px,16vh,170px) 0 clamp(3rem,7vh,5rem);overflow:hidden;isolation:isolate}
.ch::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:980px;max-height:980px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c-acc) 26%,transparent),transparent 70%);z-index:-1;animation:ch-glow 14s ease-in-out infinite alternate}
@keyframes ch-glow{to{transform:translate(-8%,10%) scale(1.12)}}
.ch__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.ch .d1{font-size:clamp(2.2rem,5.6vw,5.8rem);line-height:.98;max-width:13ch}
.ch__lead{margin:1.8rem 0 0;font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.4;max-width:30ch;color:rgba(255,249,232,.86)}
.ch__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:2.2rem 0 0;padding:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ch__tags li+li::before{content:"/";margin-right:1.4rem;color:var(--line-strong)}
.ch__mark{display:flex;justify-content:center;align-items:center}
.ch__mark img{width:min(100%,420px);height:auto;animation:ch-float 7s ease-in-out infinite;filter:drop-shadow(0 30px 80px color-mix(in srgb,var(--c-acc) 35%,transparent))}
.ch__mark--logo img{width:min(100%,520px)}
@keyframes ch-float{50%{transform:translateY(-14px) rotate(-1.5deg)}}

/* plano aberto: vídeo ou imagem com câmera lenta */
.cine{padding:0 0 clamp(4rem,9vw,7rem)}
.cine .frame{aspect-ratio:21/9}
.kb img{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.frame.kb:hover img{transform:none}

/* blocos numerados */
.blk{padding:clamp(4rem,9vw,7rem) 0}
.blk__h{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.6rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.blk__h b{font-weight:500;color:var(--c-acc)}
.blk h2.t{font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1.08;margin:0 0 1.4rem;max-width:22ch;text-wrap:balance}
.blk p.txt{margin:0;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.65;color:var(--muted);max-width:52ch}
.blk .split{align-items:center}
.frame--port{aspect-ratio:4/5;max-width:520px;justify-self:end;width:100%}

/* a ideia: painel com elementos da marca */
.idea{position:relative;background:var(--c-panel);border-radius:18px;padding:clamp(2rem,5vw,4.5rem);overflow:hidden;isolation:isolate}
.idea .d2{font-size:clamp(1.6rem,3.8vw,3.6rem);line-height:1;max-width:none;margin:0 0 clamp(2rem,4vw,3.4rem)}
.idea__bg{position:absolute;right:-6%;top:50%;width:min(48%,560px);transform:translateY(-50%);opacity:.12;z-index:-1;animation:spin 60s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);list-style:none;margin:0;padding:0}
.faces li{border-top:1px solid color-mix(in srgb,var(--c-acc) 55%,transparent);padding-top:1rem}
.faces span{display:block;font-family:var(--mono);font-size:.75rem;color:var(--c-acc);margin-bottom:.5rem}
.faces b{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:600}
.els{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);list-style:none;margin:0;padding:0;align-items:center}
.els img{width:100%;max-width:170px;margin:0 auto;animation:el 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.2s)}
@keyframes el{50%{transform:translateY(-12px) scale(1.04)}}
.idea__split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:end}
.idea__split .faces{grid-template-columns:1fr;gap:1.4rem}
.idea p.txt{margin:0;color:rgba(255,249,232,.78);font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:52ch}

/* a marca em ação: galeria */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.2rem)}
.gal .frame{grid-column:span 6;aspect-ratio:3/2}
.gal .frame.w4{grid-column:span 4;aspect-ratio:4/5}
.gal .frame.w8{grid-column:span 8}
.gal .frame.w12{grid-column:span 12;aspect-ratio:21/9}
.gal .frame.w5{grid-column:span 5;aspect-ratio:4/5}
.gal .frame.w7{grid-column:span 7}
.gal .frame img{animation:kb 22s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -4s)}
.gal .frame:hover img{animation-play-state:paused}
.act{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin:clamp(2.5rem,5vw,4rem) 0 0}
.act h2.t{margin:0}
.deliv{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;justify-content:flex-end}
.deliv li{font-family:var(--mono);font-size:.78rem;padding:.45rem .8rem;border:1px solid var(--line-strong);border-radius:100px}
.big{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)}
.big b{font-family:var(--display);font-weight:800;font-size:clamp(4rem,10vw,9rem);line-height:.85;background:var(--c-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.big span{font-weight:700;font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1.15;max-width:18ch}

/* M3: proposta inicial x evolução criativa */
.mth{display:grid;gap:clamp(3rem,6vw,5rem);margin-top:clamp(2rem,4vw,3rem)}
.mth h3{font-weight:700;font-size:clamp(1.1rem,1.6vw,1.4rem);text-transform:uppercase;letter-spacing:.02em;color:var(--c-acc);margin:0 0 1.2rem}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem)}
.pair figure{margin:0}
.pair figcaption{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.pair figure:last-child figcaption{color:var(--c-acc)}
.pair .frame{aspect-ratio:1008/840}
.pair .frame img{object-fit:contain;background:#000}
.pair figure:last-child .frame::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.pair figure:last-child .frame.in::before{animation:sweep 1.6s .5s var(--ease-out) forwards}
@keyframes sweep{to{transform:translateX(120%)}}
.mth p.txt{margin-top:1.2rem}
.adreel{overflow:hidden;padding:0 0 clamp(4rem,9vw,7rem)}
.adreel__row{display:flex;gap:clamp(.8rem,1.6vw,1.4rem);width:max-content;animation:adreel 46s linear infinite}
.adreel__row img{height:clamp(220px,34vw,460px);width:auto;border-radius:6px}
.adreel:hover .adreel__row{animation-play-state:paused}
@keyframes adreel{to{transform:translateX(-50%)}}

/* fechamento */
.cs-end{padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem);border-top:1px solid var(--line)}
.cs-end__k{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 2rem}
.cs-end__row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.cs-end .d1{font-size:clamp(2.4rem,6.4vw,6.6rem);line-height:.95;max-width:11ch}
.cs-end .btn{--btn-bg:var(--c-acc);--btn-fg:#000;font-size:.95rem;padding:1.3rem 2.4rem}
.nextcase{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;text-decoration:none;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem)}
.nextcase small{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.nextcase b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,4vw,3.6rem);line-height:1;transition:color .3s var(--ease)}
.nextcase:hover b{color:var(--c-acc)}
.nextcase .arrow{color:var(--paper);width:clamp(3rem,6vw,4.5rem);height:clamp(3rem,6vw,4.5rem);border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.nextcase:hover .arrow{transform:translateX(6px);background:var(--paper);color:#000}
.nextcase svg{width:1.5rem;height:1.5rem}

/* /trabalhos */
.tl{padding:clamp(120px,18vh,180px) 0 clamp(3rem,6vw,5rem);background:#000}
.tl .d1{font-size:clamp(3rem,11vw,11rem);line-height:.88}
.tl p{margin:1.6rem 0 0;font-size:clamp(1.15rem,1.7vw,1.6rem);max-width:34ch;color:rgba(255,249,232,.82)}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(1rem,2.4vw,2rem);padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(5rem,10vw,8rem)}
.tcard{display:block;text-decoration:none;color:inherit}
.tcard .frame{aspect-ratio:4/3}
.tcard .frame video{opacity:0;transition:opacity .6s}
.tcard:hover .frame video{opacity:1}
.tcard__meta{display:flex;flex-direction:column-reverse;gap:.5rem;padding-top:1.1rem}
.tcard h2{margin:0 0 .35rem;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,1.8vw,1.6rem)}
.tcard p{margin:0;color:var(--muted);max-width:44ch}
.tcard__n{font-family:var(--mono);font-size:.75rem;color:var(--muted);white-space:nowrap}
a.tcard .tcard__go{display:inline-block;margin-top:.9rem;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:.1rem;transition:color .3s}
a.tcard:hover .tcard__go{color:var(--orange)}

/* PlusCRM: símbolo girando na abertura, do caos ao comando */
.ch__ghost{position:absolute;right:-12vw;top:50%;width:min(80vw,1100px);transform:translateY(-50%);opacity:.07;z-index:-1;animation:ghost 90s linear infinite;pointer-events:none}
@keyframes ghost{to{transform:translateY(-50%) rotate(-360deg)}}
.ch__mark--spin{flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
.ch__mark--spin>img:first-child{width:min(100%,400px);animation:pin 26s linear infinite;filter:drop-shadow(0 0 60px color-mix(in srgb,var(--c-acc) 30%,transparent))}
@keyframes pin{to{transform:rotate(360deg)}}
.ch__word{width:min(90%,380px);height:auto;animation:none!important;filter:none!important}
.els--link{position:relative;padding:2.5rem 0}
.els--link::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;border-radius:2px;background:var(--c-grad);transform:scaleX(0);transform-origin:left;transition:transform 1.4s 1s var(--ease-out);opacity:.7}
.els--link.in::before{transform:scaleX(1)}
.els--link li{position:relative;z-index:1;transition:transform 1.3s var(--ease-out),opacity 1s;transition-delay:calc(var(--i,0) * 110ms)}
.els--link li:nth-child(1){transform:translate(-30px,-70px) rotate(-38deg)}
.els--link li:nth-child(2){transform:translate(25px,80px) rotate(52deg)}
.els--link li:nth-child(3){transform:translate(-20px,-95px) rotate(-70deg)}
.els--link li:nth-child(4){transform:translate(35px,65px) rotate(44deg)}
.els--link li:nth-child(5){transform:translate(-25px,-60px) rotate(-30deg)}
.js .els--link li{opacity:.35}
.els--link.in li{transform:none;opacity:1}
.els--link img{max-width:140px;animation-delay:calc(1.8s + var(--i,0) * -1.2s)}
.idea__txt{margin-top:clamp(1.5rem,3vw,2.5rem)!important}
@media (prefers-reduced-motion:reduce){.ch__ghost,.ch__mark--spin>img:first-child{animation:none}.els--link li{transform:none;opacity:1}.els--link::before{transform:none}}

/* PlusCRM, o desafio: as quatro ferramentas soltas, cada uma à deriva */
.chaos{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);border-radius:14px;background:var(--c-panel);overflow:hidden}
.chaos__k{grid-column:1/-1;margin:0 0 .4rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chaos__card{padding:1.1rem 1.2rem;border:1.5px dashed rgba(255,249,232,.28);border-radius:14px;background:rgba(255,249,232,.02);animation:drift 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.7s)}
.chaos__card:nth-child(3){--r:-3deg}.chaos__card:nth-child(4){--r:2.5deg;margin-top:1.4rem}.chaos__card:nth-child(2){--r:2deg}.chaos__card:nth-child(5){--r:-2deg;margin-top:-.6rem}
.chaos__card b{display:block;font-weight:600;font-size:clamp(1rem,1.3vw,1.15rem);margin-bottom:.25rem}
.chaos__card span{display:block;font-size:.92rem;color:var(--muted);line-height:1.4}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}33%{transform:translate(7px,-9px) rotate(calc(var(--r,0deg) + 1.5deg))}66%{transform:translate(-8px,6px) rotate(calc(var(--r,0deg) - 1.5deg))}}
.chaos__end{grid-column:1/-1;display:flex;align-items:center;gap:1rem;margin:.8rem 0 0;font-weight:600;font-size:clamp(1rem,1.4vw,1.2rem)}
.chaos__end i{flex:none;width:72px;height:2px;background:repeating-linear-gradient(90deg,var(--c-acc) 0 10px,transparent 10px 18px);animation:dash 1.2s linear infinite;background-size:36px 2px}
@keyframes dash{to{background-position:36px 0}}
@media (max-width:899px){.chaos{grid-template-columns:1fr}.chaos__card:nth-child(n){margin-top:0}}
@media (prefers-reduced-motion:reduce){.chaos__card,.chaos__end i{animation:none}}

@media (max-width:899px){
  .ch__grid,.act,.split{grid-template-columns:1fr}
  .ch__mark{order:-1;justify-content:flex-start}
  .ch__mark img{width:min(70%,300px)}
  .ch__mark--logo img{width:min(80%,360px)}
  .ch__mark--spin{align-items:flex-start}
  .ch__mark--spin>img:first-child{width:min(55%,240px)}
  .ch__word{width:min(70%,280px)}
  .els--link::before{display:none}
  .cine .frame{aspect-ratio:16/10}
  .frame--port{justify-self:stretch;max-width:none}
  .faces{grid-template-columns:1fr}
  .idea__split{grid-template-columns:1fr}
  .els{grid-template-columns:repeat(min(var(--n,4),3),minmax(0,1fr))}
  .gal .frame,.gal .frame.w4,.gal .frame.w5,.gal .frame.w7,.gal .frame.w8{grid-column:span 12;aspect-ratio:3/2}
  .gal .frame.w12{aspect-ratio:16/10}
  .deliv{justify-content:flex-start}
  .tgrid{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ch::before,.ch__mark img,.kb img,.gal .frame img,.els img,.idea__bg,.adreel__row{animation:none}
  .pair figure:last-child .frame::before{display:none}
}