/* Intuitu Labs · página de projetos (projetos.html): galeria filtrável de peças entregues.
   Base: intuitu.css + frames.css + case.css (cor por projeto [data-k], vídeo nas molduras, chamado final)
   .gf (filtro) · .gg/.gc (grade e card) · .cmp m-dm|m-d|m-m1|m-m2 (composição de aparelhos) · .fic (selo de números fictícios)
   .gx (visualizador: .gx-top com imagem e cabeçalho, .gx-more com o que fizemos, números e como funciona)
   As animações de filtro, abertura e troca são feitas em projetos.js (Web Animations); aqui ficam estados e repouso. */

:root{--out:cubic-bezier(.22,1,.36,1)}
/* --w animável: o iPhone cresce suave ao abrir o protótipo */
@property --w{syntax:"<length>";inherits:true;initial-value:300px}

/* ---------- Topo curto ---------- */
.pt-top{padding:clamp(150px,20vh,210px) 0 clamp(56px,6vw,90px)}
.pt-top .wrap{position:relative;z-index:2}
.pt-top h1{font:600 clamp(60px,10vw,156px)/.92 var(--display);letter-spacing:-.058em}
.pt-top h1.lines .ln{padding-bottom:.14em;margin-bottom:-.14em}
.pt-top .lede{margin-top:26px;font-size:clamp(19px,1.6vw,23px);max-width:30em}

/* ---------- Filtro (fica preso logo abaixo do menu) ---------- */
.gl{position:relative;padding-bottom:clamp(90px,10vw,140px)}
.gf-bar{position:sticky;top:88px;z-index:40;pointer-events:none;margin-bottom:clamp(28px,3vw,44px)}
.gf{pointer-events:auto;position:relative;display:inline-flex;gap:2px;padding:6px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:rgba(250,247,239,.6);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(31,58,46,.06),0 18px 40px -24px rgba(31,58,46,.4)}
.gf::-webkit-scrollbar{display:none}
.gf-b{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  font:500 15px/1 var(--text);color:var(--ink);cursor:pointer;white-space:nowrap;transition:color .5s var(--out),background-color .3s,transform .4s var(--out)}
.gf-b span{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-4);transition:color .5s var(--out)}
.gf-b:hover{background:rgba(255,255,255,.55)}
.gf-b[aria-pressed="true"]{color:var(--creme)}
.gf-b[aria-pressed="true"] span{color:rgba(250,247,239,.62)}
.gf-b[aria-pressed="true"]:hover{background:transparent}
.gf-b:active{transform:scale(.96)}
.gf-ind{position:absolute;z-index:0;left:0;top:6px;height:44px;width:0;border-radius:999px;background:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(31,58,46,.6);
  transition:transform .75s var(--spring-e,var(--out)),width .75s var(--spring-e,var(--out))}
html.still .gf-ind{transition:none}
html:not(.js) .gf-bar{display:none}

/* ---------- Grade ---------- */
.gg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3.4vw,52px) clamp(18px,2vw,28px)}
.gc[hidden]{display:none}
.gc-a{display:block;text-decoration:none;color:var(--ink);border-radius:30px;--mx:0;--my:0;--up:0px;--lift:0px;--s:1}
.gc-a:focus-visible{outline-offset:8px;border-radius:32px}
.gc-txt{display:flex;flex-direction:column;gap:5px;padding:18px 4px 0}
.gc-t{font:600 clamp(20px,1.6vw,23px)/1.15 var(--display);letter-spacing:-.03em}
.gc-p{font-size:15.5px;line-height:1.4;color:var(--ink-3)}
.gc-tag,.fic{position:absolute;z-index:6;top:16px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;
  font:500 13px/1 var(--text);white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gc-tag{left:16px;color:var(--ink-2);background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 6px 14px -10px rgba(31,58,46,.35)}
/* selo escuro, para não ser confundido com parte da tela */
.fic{right:16px;padding:0 12px 0 9px;color:var(--creme);background:rgba(31,58,46,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -10px rgba(31,58,46,.6)}
.fic .ic{width:16px;height:16px;stroke-width:1.8}

/* ---------- Composição de aparelhos (card e visualizador) ---------- */
.cmp{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:28px;container-type:inline-size;isolation:isolate;
  background:radial-gradient(60% 70% at 18% 28%,rgba(var(--t1),.5),transparent 72%),
             radial-gradient(56% 66% at 86% 78%,rgba(var(--t3),.48),transparent 72%),
             radial-gradient(46% 52% at 66% 18%,rgba(var(--t2),.7),transparent 72%),rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9),0 40px 70px -46px rgba(31,58,46,.42)}
.cmp .brw,.cmp .iph{position:absolute;display:block}
.cmp .brw .bar,.cmp .brw .scr,.cmp .iph .scr,.cmp .iph span{display:block}
.cmp .brw .bar{display:flex}
.cmp .m-ph{position:absolute;display:block}
.cmp .m-ph .iph{position:relative}
.m-dm .brw{left:7cqi;top:17cqi;width:72cqi}
.m-dm .m-ph{right:6cqi;top:27cqi}
.m-dm .m-ph .iph{--w:22cqi}
.m-d .brw{left:8cqi;right:8cqi;top:19cqi}
.m-m1 .m-ph{left:50%;top:15cqi;transform:translateX(-50%)}
.m-m1 .m-ph .iph{--w:40cqi}
.m-m2 .m-ph{top:19cqi}
.m-m2 .m-ph1{left:13cqi}
.m-m2 .m-ph2{right:13cqi;top:11cqi}
.m-m2 .m-ph .iph{--w:34cqi}
.gc .brw{border-radius:9px}
.gc .brw .bar{height:20px}
.gc .brw .bar::before{left:9px;width:6px;height:6px;margin-top:-3px;box-shadow:10px 0 0 #E0D9CB,20px 0 0 #E0D9CB}
.gc .brw .bar span{font-size:9px;padding:3px 10px;border-radius:5px}

/* profundidade: o navegador fica atrás, o celular na frente; seguem o ponteiro (--mx/--my de -1 a 1, postos por projetos.js) */
.gc .brw{transform:translate3d(calc(var(--mx) * -7px),calc(var(--my) * -5px + var(--up)),0) scale(var(--s));transition:transform 1.1s var(--out)}
.gc .m-ph .iph{transform:translate3d(calc(var(--mx) * 12px),calc(var(--my) * 9px + var(--lift)),0);transition:transform 1.1s var(--out)}
.gc .m-ph2 .iph{transform:translate3d(calc(var(--mx) * 18px),calc(var(--my) * 13px + var(--lift) * 1.5),0)}
.gc-a:hover{--up:-4px;--s:1.015;--lift:-12px}
/* brilho que acompanha o ponteiro */
.gc-media::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .8s var(--out);
  background:radial-gradient(60% 50% at calc(50% + var(--mx) * 40%) calc(40% + var(--my) * 40%),rgba(255,255,255,.4),transparent 70%);mix-blend-mode:soft-light}
.gc-a:hover .gc-media::after{opacity:1}
.gc .cmp{transition:box-shadow .9s var(--out),transform .9s var(--out)}
.gc-a:hover .cmp{box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1px 0 rgba(255,255,255,.95),0 56px 90px -46px rgba(31,58,46,.55)}
.gc-a:active .cmp{transform:scale(.985)}
.gc-t{transition:transform .9s var(--out)}
.gc-a:hover .gc-t{transform:translateX(3px)}
html.still .gc .brw,html.still .gc .m-ph .iph,html.still .gc .cmp,html.still .gc-t{transition:none}
/* card de origem some enquanto o visualizador está aberto: é o "mesmo" objeto que cresceu */
.gc.src .gc-media{visibility:hidden}

.gl-credit{margin-top:clamp(60px,7vw,96px)}

/* ---------- Visualizador ---------- */
.gx{padding:0;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;overflow:auto;overscroll-behavior:contain;color:var(--ink)}
.gx::backdrop{background:rgba(31,58,46,.26);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
html.gx-open{overflow:hidden}
html{scrollbar-gutter:stable}
.gx::backdrop{transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.gx.closing::backdrop{opacity:0}
.gx-ghost{box-shadow:0 50px 90px -40px rgba(15,30,22,.45)}
.gx-in{position:relative;width:min(1200px,100% - 48px);margin:max(28px,5vh) auto;padding:clamp(18px,2.4vw,32px);border-radius:var(--r-stage);
  background:rgba(250,247,239,.95);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1px 0 #fff,0 60px 120px -50px rgba(15,30,22,.55)}
.gx-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:center}
.gx-vis{border-radius:var(--r-glass);transform-origin:0 0}
.gx-vis.m-dm .brw{left:5cqi;top:13cqi;width:76cqi}
.gx-vis.m-dm .m-ph{right:4cqi;top:22cqi}
.gx-vis.m-dm .m-ph .iph{--w:25cqi}
.gx-vis.m-d .brw{left:5cqi;right:5cqi;top:14cqi}
.gx-vis .fic{left:18px;right:auto;top:18px}
/* selo também no cabeçalho do painel e em cada tela da faixa */
.fic.fic-h{position:static;margin-top:16px;width:max-content}
.gt-dev{position:relative}
.fic.fic-s{top:42px;left:12px;right:auto;height:26px;padding:0 10px;font-size:12px}
.gt-m .fic.fic-s{top:auto;bottom:14px;left:50%;transform:translateX(-50%)}
.gx-head{padding:56px 12px 12px 0}
.gx-t{font:600 clamp(34px,3.4vw,52px)/1 var(--display);letter-spacing:-.045em;text-wrap:balance}
.gx-p{margin-top:12px;font-size:17px;color:var(--ink-3)}
.gx-serve{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.gx-serve b{font-weight:600;color:var(--ink)}
.gx-v{margin-top:24px;font-size:clamp(19px,1.5vw,22px);line-height:1.45;color:var(--ink);text-wrap:pretty}
.gx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

/* blocos de valor: tudo em faixas inteiras, curto, para bater o olho */
.gx-more{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,3vw,40px)}
.gx-blk{border-radius:var(--r-glass);padding:clamp(22px,2.4vw,32px);background:rgba(255,255,255,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 1px 0 rgba(31,58,46,.04),0 24px 50px -40px rgba(31,58,46,.35)}
.gx-blk h3{font:600 clamp(21px,1.7vw,25px)/1.1 var(--display);letter-spacing:-.03em;margin-bottom:24px}
.gx-feito ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(210px,(100% - 84px) / 4)),1fr));gap:24px 28px}
.gx-feito li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;row-gap:4px;align-content:start}
.gx-feito li .ic{grid-row:1 / span 2;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--ink);color:var(--creme);stroke-width:2.3;margin-top:-1px}
.gx-feito li b{font:600 17px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.gx-feito li span{font-size:15.5px;line-height:1.45;color:var(--ink-3)}
.gx-num dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:24px 22px}
.gx-num dl>div{display:flex;flex-direction:column}
.gx-num dd{order:1;margin:0;font:600 clamp(38px,3.6vw,54px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gx-num dt{order:2;margin-top:8px;font-size:15.5px;line-height:1.4;color:var(--ink-3)}
.gx-arq{grid-column:1 / -1}
/* faixa de telas */
.gx-telas{padding-right:0;overflow:hidden}
.gx-telas-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:clamp(22px,2.4vw,32px);margin-bottom:22px}
.gx-telas-h h3{margin:0}
.gx-telas-nav{display:flex;gap:8px}
.gx-telas-nav .gx-b{width:42px;height:42px}
.gx-telas-nav .gx-b:disabled{opacity:.35;cursor:default}
.gx-strip{list-style:none;margin:0;padding:6px clamp(22px,2.4vw,32px) 18px 4px;display:flex;align-items:flex-end;gap:clamp(18px,2vw,28px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:4px;scrollbar-width:none;overscroll-behavior-x:contain}
.gx-strip::-webkit-scrollbar{display:none}
.gx-strip li{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gx-strip .gt-d .brw{width:clamp(300px,42vw,520px)}
.gx-strip .gt-m .iph{--w:clamp(150px,15vw,188px)}
.gx-strip p{font-size:14.5px;color:var(--ink-3);padding-left:2px}
/* protótipo navegável dentro do visualizador */
.gx-vis .m-ph{transition:left .9s var(--out),right .9s var(--out),top .9s var(--out),transform .9s var(--out),opacity .5s var(--out)}
.gx-vis .m-ph .iph{transition:--w .9s var(--out)}
.gx-vis.proto .m-ph2{opacity:0;pointer-events:none}
.gx-vis.proto.m-m2 .m-ph1{left:50%;top:3cqi;transform:translateX(-50%)}
.gx-vis{transition:aspect-ratio .9s var(--out)}
.gx-vis.proto{aspect-ratio:1/1}
.gx-vis.proto .m-ph1 .iph{--w:41cqi}
.gx-frame{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform-origin:0 0;z-index:3;background:#fff;opacity:0;transition:opacity .5s var(--out)}
.gx-frame.ready{opacity:1}
.gx-vis.loading .m-ph1::after{content:"Carregando o protótipo";position:absolute;z-index:7;left:50%;bottom:14%;transform:translateX(-50%);white-space:nowrap;
  padding:9px 14px;border-radius:999px;font:500 13px/1 var(--text);color:var(--creme);background:rgba(31,58,46,.86);animation:gx-pulse 1.6s ease-in-out infinite}
:lang(en) .gx-vis.loading .m-ph1::after{content:"Loading the prototype"}
:lang(es) .gx-vis.loading .m-ph1::after{content:"Cargando el prototipo"}
@keyframes gx-pulse{50%{opacity:.6}}
html.still .gx-vis.loading .m-ph1::after{animation:none}
html.still .gx-vis .m-ph,html.still .gx-frame{transition:none}
.gx-flow{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(26px,3vw,46px)}
.gx-flow li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border-radius:var(--r-lg);background:#fff;
  box-shadow:inset 0 0 0 1px rgba(31,58,46,.08),0 14px 30px -24px rgba(31,58,46,.45)}
.gx-flow li::before{content:"";width:10px;height:10px;border-radius:50%;margin-bottom:6px;background:var(--dot);box-shadow:0 0 0 5px rgba(252,157,103,.18)}
.gx-flow b{font:600 17px/1.25 var(--display);letter-spacing:-.02em}
.gx-flow span{font-size:14.5px;line-height:1.4;color:var(--ink-3)}
/* conector com o gradiente da marca correndo */
.gx-flow li:not(:last-child)::after{content:"";position:absolute;top:50%;left:100%;width:clamp(26px,3vw,46px);height:3px;margin-top:-1.5px;border-radius:3px;
  background:linear-gradient(90deg,#FEB559,#9EB093,#85ACD4,#A39FFC,#FEB559);background-size:200% 100%}
html.motion .gx[open] .gx-flow li:not(:last-child)::after{animation:gx-flow 2.4s linear infinite}
@keyframes gx-flow{to{background-position:-200% 0}}
.gx-notes{grid-column:1 / -1;display:grid;gap:6px;padding:0 6px}
.gx-notes:empty{display:none}

.gx-nav{position:absolute;z-index:8;top:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);display:flex;gap:8px}
.gx-b{width:46px;height:46px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(31,58,46,.08),0 8px 18px -12px rgba(31,58,46,.4);transition:background-color .3s,transform .4s var(--out)}
.gx-b:hover{background:#fff}
.gx-b:active{transform:scale(.92)}
.gx-x{margin-left:6px;background:var(--ink);color:var(--creme);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.gx-x:hover{background:#28483A}

/* ---------- Responsivo ---------- */
@media (max-width:1079px){
  .gg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-top{grid-template-columns:1fr}
  .gx-head{padding:0 8px 4px}
  .gx-in{padding-top:84px}
  .gx-more{grid-template-columns:1fr}
  .gx-flow{grid-auto-flow:row;grid-auto-columns:auto;gap:22px}
  .gx-flow li:not(:last-child)::after{top:100%;left:34px;width:3px;height:22px;margin:0;background:linear-gradient(180deg,#FEB559,#9EB093,#85ACD4,#A39FFC,#FEB559);background-size:100% 200%}
  html.motion .gx[open] .gx-flow li:not(:last-child)::after{animation-name:gx-flow-v}
}
@keyframes gx-flow-v{to{background-position:0 -200%}}
@media (max-width:679px){
  .gx-vis.proto{aspect-ratio:10/19}
  .gx-vis.proto .m-ph1 .iph{--w:78cqi}
  .gx-strip .gt-d .brw{width:78vw}
  .gx-strip .gt-m .iph{--w:42vw}
  .pt-top{padding:130px 0 48px}
  .pt-top h1{font-size:clamp(56px,17vw,76px)}
  .pt-top .lede{font-size:18px}
  .gf-bar{top:84px}
  .gf-bar .wrap{width:100%}
  .gf{display:flex;border-radius:0;padding:6px 16px;width:100%;background:rgba(250,247,239,.78)}
  .gg{grid-template-columns:1fr;gap:40px}
  .gc-tag,.fic{top:14px}
  .gc-tag{left:14px}
  .fic{right:14px}
  .gx-in{width:calc(100% - 16px);margin:8px auto;border-radius:30px;padding:76px 12px 16px}
  .gx-nav{top:14px;right:14px}
  .gx-t{font-size:clamp(30px,9vw,40px)}
  .gx-acts .btn{width:100%;justify-content:center}
  .gx-blk{border-radius:var(--r-lg);padding:22px 20px}
  .gx-num dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .gx-num dd{font-size:clamp(32px,10vw,42px)}
}
.gx-in:focus{outline:none}