/* =========================================================
   Mockups (browser, laptop, phone) + capas dos cases
   Compartilhado entre a home e as páginas de projeto
   ========================================================= */
:root{--mk-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- Idiomas (PT-BR / EN) ---------- */
html:not([data-lang="en"]) body [lang="en"]{display:none!important}
html[data-lang="en"] body [lang="pt-BR"]{display:none!important}
html main,html footer{transition:opacity .18s ease}
html.lang-fade main,html.lang-fade footer{opacity:0}
.lang-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 "Albert Sans",sans-serif;letter-spacing:.02em;color:#344054;padding:9px 12px;margin-left:2px;border-radius:999px;background:#f2f4f7;transition:background .25s,color .25s,transform .3s var(--mk-ease)}
.lang-btn:hover{background:#e4e7ec;color:#000}
.lang-btn:active{transform:scale(.95)}
.lang-btn:focus-visible{outline:2px solid #2e90fa;outline-offset:2px}
.lang-btn svg{flex:none}
html:not([data-lang="en"]) .lang-btn .to-pt,html[data-lang="en"] .lang-btn .to-en{display:none}
@media (max-width:640px){.lang-btn svg{display:none}.lang-btn{padding:8px 9px;font-size:12px}}

/* ---------- Browser window ---------- */
.mk-browser{position:relative;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.06),0 30px 60px -20px rgba(16,24,40,.45)}
.mk-browser .mk-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#f4f5f7;border-bottom:1px solid #e6e8ec}
.mk-browser .mk-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57;flex:none}
.mk-browser .mk-bar i:nth-child(2){background:#febc2e}
.mk-browser .mk-bar i:nth-child(3){background:#28c840}
.mk-browser .mk-bar > span{flex:1;max-width:46%;height:14px;margin:0 auto;border-radius:6px;background:#e7e9ee;font:500 9px/14px "Geist",system-ui,sans-serif;color:#8a93a3;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px}
.mk-browser img{display:block;width:100%;height:auto;aspect-ratio:1440/1024;object-fit:cover;object-position:top}
.mk-browser.sm .mk-bar{height:18px;gap:4px;padding:0 8px}
.mk-browser.sm .mk-bar i{width:6px;height:6px}
.mk-browser.sm .mk-bar > span{height:9px;font-size:0}

/* ---------- Laptop ---------- */
.mk-laptop{position:relative;width:100%}
.mk-laptop .mk-lid{position:relative;margin:0 7%;padding:1.6% 1.6% 2.4%;background:#0d0f14;border-radius:18px 18px 4px 4px;
  box-shadow:inset 0 0 0 1px #2a2e38,0 40px 80px -30px rgba(0,0,0,.55)}
.mk-laptop .mk-lid::before{content:"";position:absolute;top:.7%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a2e38}
.mk-laptop .mk-screen{border-radius:6px;overflow:hidden;background:#fff}
.mk-laptop .mk-screen img{display:block;width:100%;aspect-ratio:1440/1024;object-fit:cover;object-position:top}
.mk-laptop .mk-base{position:relative;height:clamp(10px,1.6vw,20px);background:linear-gradient(180deg,#e3e5ea,#b9bdc6 70%,#9298a3);border-radius:2px 2px 18px 18px;
  box-shadow:0 18px 30px -12px rgba(0,0,0,.45)}
.mk-laptop .mk-base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:40%;transform:translateX(-50%);background:#c7cad2;border-radius:0 0 10px 10px}

/* ---------- Phone (tela longa com rolagem) ---------- */
.mk-phone{position:relative;display:flow-root;background:#0d0f14;border-radius:18%/8.4%;
  box-shadow:inset 0 0 0 1.5px #3a3f4b,0 30px 50px -18px rgba(0,0,0,.5)}
.mk-phone::before{content:"";position:absolute;z-index:3;top:4.6%;left:50%;width:30%;height:2.6%;transform:translateX(-50%);background:#0d0f14;border-radius:999px}
.mk-phone .scr{position:relative;margin:4%;overflow:hidden;aspect-ratio:9/19.5;border-radius:15%/7%;background:#fff}
.mk-phone .scr img{position:absolute;left:0;top:0;max-width:none;width:var(--w);height:auto;
  transform:translate(var(--tx),var(--ty0));transition:transform var(--dur,7s) cubic-bezier(.45,0,.55,1)}
.mk-phone.scroll:hover .scr img,.mk-phone.scroll.play .scr img,
.cover:hover .mk-phone.scroll .scr img{transform:translate(var(--tx),var(--ty1))}

/* ---------- Capas ---------- */
.cover{position:relative;aspect-ratio:1.45;border-radius:14px;overflow:hidden;isolation:isolate;
  --rx:0deg;--ry:0deg;perspective:1200px}
.cover .cv-bg{position:absolute;inset:0;z-index:-1}
.cover .cv-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent)}
.cover .cv-bg::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cover .cv-stage{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .6s var(--mk-ease)}
.cover .cv-chips{position:absolute;z-index:5;top:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:75%}
.cover .cv-chips > span{font:500 12px/1 "Geist",system-ui,sans-serif;color:#fff;padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cover .cv-chips > span:first-child{background:#fff;color:#111;border-color:#fff}
.cover .cv-float{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;font:500 12px/1 "Geist",system-ui,sans-serif;color:#101828;
  background:rgba(255,255,255,.92);padding:9px 12px;border-radius:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .7s var(--mk-ease)}
.cover .cv-float b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:11px}
.cover .cv-go{position:absolute;z-index:6;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;
  opacity:0;transform:scale(.6) rotate(-45deg);transition:all .5s var(--mk-ease)}
.cover .cv-back,.cover .cv-front{position:absolute;transition:transform .8s var(--mk-ease),filter .8s}
.cover .cv-back{z-index:1;filter:saturate(.9) brightness(.92)}
.cover .cv-front{z-index:2}

/* layout "browser" (web) */
.cover.l-web .cv-back{width:56%;right:5%;top:17%}
.cover.l-web .cv-front{width:66%;left:7%;top:34%}
.cover.l-web .cv-float{right:6%;bottom:9%}
.cover.l-web:hover .cv-front,.cover.l-web:focus-within .cv-front{transform:translate3d(0,-4%,40px)}
.cover.l-web:hover .cv-back,.cover.l-web:focus-within .cv-back{transform:translate3d(3%,-3%,0);filter:saturate(1) brightness(1)}
.cover.l-web:hover .cv-float{transform:translateY(-8px)}

/* layout "phones" (mobile) */
.cover.l-app .ph{position:absolute;width:23%}
.cover.l-app .ph.c{left:38.5%;top:11%;z-index:3}
.cover.l-app .ph.l{left:15%;top:22%;transform:rotate(-8deg);z-index:2}
.cover.l-app .ph.r{left:62%;top:22%;transform:rotate(8deg);z-index:2}
.cover.l-app .ph{transition:transform .9s var(--mk-ease)}
.cover.l-app:hover .ph.c{transform:translateY(-4%)}
.cover.l-app:hover .ph.l{transform:translateX(-8%) rotate(-11deg)}
.cover.l-app:hover .ph.r{transform:translateX(8%) rotate(11deg)}
.cover.l-app .cv-float{left:6%;bottom:9%;z-index:4}

a:hover .cover .cv-go,a:focus-visible .cover .cv-go{opacity:1;transform:none}

/* temas por projeto */
.th-pd .cv-bg,.th-pd.stage,.th-pd.metric{background:radial-gradient(120% 90% at 85% 0%,#3b82f6 0%,transparent 55%),radial-gradient(90% 80% at 0% 100%,#1e3a8a 0%,transparent 60%),linear-gradient(150deg,#0b5ed7,#0a2a7a)}
.th-pd .cv-float b{background:#0b5ed7}
.th-garen .cv-bg,.th-garen.stage,.th-garen.metric{background:radial-gradient(70% 60% at 50% 110%,rgba(227,38,58,.55),transparent 70%),radial-gradient(80% 70% at 100% 0%,#2c4a8f 0%,transparent 60%),linear-gradient(160deg,#1d2b53,#121a33)}
.th-garen .cv-float b{background:#e3263a}
.th-q .cv-bg,.th-q.stage,.th-q.metric{background:radial-gradient(90% 80% at 100% 0%,#c9a58a 0%,transparent 55%),radial-gradient(80% 70% at 0% 100%,#4a1621 0%,transparent 60%),linear-gradient(150deg,#8a3a46,#5a1f2a)}
.th-q .cv-float b{background:#7a2e3a}
.th-perfis .cv-bg,.th-perfis.stage,.th-perfis.metric{background:radial-gradient(70% 70% at 100% 100%,#10b981 0%,transparent 60%),radial-gradient(60% 60% at 85% 70%,#06b6d4 0%,transparent 60%),linear-gradient(150deg,#1b1e27,#0f1117)}
.th-perfis .cv-float b{background:#10b981}

@media (max-width:640px){
  .cover .cv-chips > span{font-size:11px;padding:6px 8px}
  .cover .cv-float{font-size:11px;padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){
  .mk-phone .scr img,.cover .cv-stage,.cover .cv-back,.cover .cv-front,.cover .ph{transition:none!important}
}