:root{
  /* ---- LIGHT THEME (default) — mesmos tokens do kaig.com.br ---- */
  --bg:#F7F7FB;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --line:rgba(10,12,20,0.10);
  --line-strong:rgba(10,12,20,0.18);
  --text:#12141C;
  --text-muted:#565C6E;
  --violet:#6C5CE7;
  --teal:#0FA894;
  --grad: linear-gradient(120deg, var(--violet), var(--teal));
  --glow-1: rgba(108,92,231,0.10);
  --glow-2: rgba(15,168,148,0.09);
  --grain-opacity:0.02;
  --btn-primary-text:#FFFFFF;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#080B12;
    --bg-2:#0D121C;
    --surface:#121826;
    --line:rgba(237,239,246,0.09);
    --line-strong:rgba(237,239,246,0.16);
    --text:#EDEFF6;
    --text-muted:#8B92A6;
    --violet:#8A7CFF;
    --teal:#2FE6C8;
    --glow-1: rgba(138,124,255,0.16);
    --glow-2: rgba(47,230,200,0.09);
    --grain-opacity:0.035;
    --btn-primary-text:#080B12;
  }
}
:root[data-theme="dark"]{
  --bg:#080B12;
  --bg-2:#0D121C;
  --surface:#121826;
  --line:rgba(237,239,246,0.09);
  --line-strong:rgba(237,239,246,0.16);
  --text:#EDEFF6;
  --text-muted:#8B92A6;
  --violet:#8A7CFF;
  --teal:#2FE6C8;
  --glow-1: rgba(138,124,255,0.16);
  --glow-2: rgba(47,230,200,0.09);
  --grain-opacity:0.035;
  --btn-primary-text:#080B12;
}

*{box-sizing:inherit; margin:0; padding:0;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow:hidden;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; cursor:pointer;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
::selection{background:var(--violet); color:#fff;}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;}

.bg-field{
  position:fixed; inset:0; z-index:-2; background:var(--bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 82% -6%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse 700px 500px at -6% 40%, var(--glow-2), transparent 60%);
}
.grain{position:fixed; inset:0; z-index:-1; opacity:var(--grain-opacity); pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- estrutura: header fixo em cima, modelo ocupa o resto ---------- */
.app{
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.stage{position:relative; flex:1; min-height:0;}
#frame{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent;}

/* ---------- nav (igual ao kaig.com.br) ---------- */
header{
  flex:none; position:relative; z-index:40;
  padding-top: env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 28px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; white-space:nowrap;}
.brand img{width:30px; height:30px; border-radius:0;}

.nav-links{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:30px;
  overflow-x:auto; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  position:relative; flex:none; padding:4px 0;
  font-size:0.92rem; color:var(--text-muted); transition:color .2s;
}
.nav-links a:hover{color:var(--text);}
.nav-links a[aria-current="page"]{color:var(--text);}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--grad);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:99px; font-size:0.9rem; font-weight:500;
  border:1px solid var(--line-strong); background:none;
  transition:transform .2s, border-color .2s, background .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--grad); color:var(--btn-primary-text); border:none; font-weight:600;}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{color:var(--text); background:transparent;}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal);}
.btn-ghost[aria-expanded="true"]{border-color:var(--teal); color:var(--teal);}
.nav-cta{display:flex; align-items:center; gap:12px; flex:none;}
.btn .ico{width:18px; height:18px; flex:none;}
.btn-wa .ico{display:none; width:22px; height:22px;}

/* ---------- galeria ---------- */
.gallery{position:absolute; inset:0; overflow-y:auto; padding:72px 0 80px;}
.gallery-head{max-width:60ch; margin-bottom:48px;}
.section-label{font-size:0.9rem; color:var(--teal); margin-bottom:16px; font-family:'Space Grotesk',sans-serif;}
.gallery-head h1{font-size:clamp(1.9rem,3.6vw,2.8rem);}
.gallery-head p:last-child{color:var(--text-muted); margin-top:14px; font-size:1.02rem;}

.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px;}
.card{
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:20px; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:var(--teal); transform:translateY(-2px);}
.thumb{position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface);}
.thumb iframe{position:absolute; top:0; left:0; width:1280px; height:800px; border:0; transform-origin:0 0; pointer-events:none;}
.card-body{padding:22px 24px 24px;}
.card-body h3{font-size:1.2rem; margin-bottom:6px;}
.card-body p{color:var(--text-muted); font-size:0.95rem;}
.tags{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.tags span{font-size:0.78rem; color:var(--text-muted); border:1px solid var(--line); padding:4px 12px; border-radius:99px;}
.empty{color:var(--text-muted); border:1px dashed var(--line-strong); border-radius:20px; padding:40px; max-width:52ch;}

/* ---------- painel de personalização ---------- */
.panel{
  position:absolute; z-index:30; top:14px; right:14px;
  width:340px; max-height:calc(100% - 28px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:20px;
  padding:20px 22px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
  animation:abre .18s ease-out;
}
@keyframes abre{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.panel-head h2{font-size:1.15rem;}
.panel-close{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--text-muted);}
.panel-close:hover{color:var(--text); border-color:var(--line-strong);}
.panel-close svg{width:16px; height:16px;}

.field{margin-bottom:18px;}
.field-label{display:flex; justify-content:space-between; font-size:0.85rem; color:var(--text-muted); margin-bottom:8px;}
.field-label output{color:var(--text); font-variant-numeric:tabular-nums;}

.seg{display:flex; flex-wrap:wrap; gap:8px;}
.seg button{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:99px; font-size:0.85rem;
  border:1px solid var(--line-strong); background:transparent; transition:border-color .2s, background .2s;
}
.seg button:hover{border-color:var(--teal);}
.seg button[aria-pressed="true"]{border-color:var(--violet); background:color-mix(in srgb, var(--violet) 14%, transparent);}
.seg i{width:12px; height:12px; border-radius:50%; border:1px solid var(--line-strong);}

.swatches{display:flex; flex-wrap:wrap; gap:10px;}
.swatches button, .swatches label{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--line-strong); padding:0; position:relative; overflow:hidden;
}
.swatches button[aria-pressed="true"], .swatches label.on{box-shadow:0 0 0 2px var(--text);}
.swatches label{
  display:grid; place-items:center;
  background:conic-gradient(#e63946,#f4a261,#f2e30c,#2a9d8f,#2563eb,#a855f7,#e63946);
}
.swatches input[type="color"]{position:absolute; inset:-6px; width:44px; height:44px; opacity:0; cursor:pointer;}

select{
  width:100%; padding:10px 12px; border-radius:12px; font:inherit; font-size:0.9rem;
  background:var(--bg-2); color:var(--text); border:1px solid var(--line-strong);
}
input[type="range"]{width:100%; accent-color:var(--violet);}

.panel-actions{display:flex; gap:10px; margin-top:6px;}
.panel-actions .btn{flex:1; justify-content:center; padding:10px 12px;}

/* ---------- celular ---------- */
@media (max-width: 900px){
  nav{flex-wrap:wrap; row-gap:12px; padding:12px 18px;}
  .nav-cta{order:2; margin-left:auto;}
  .nav-links{order:3; flex:none; width:100%; justify-content:flex-start; gap:8px; padding-bottom:2px;}
  .nav-links a{padding:6px 14px; border:1px solid var(--line-strong); border-radius:99px; font-size:0.85rem;}
  .nav-links a[aria-current="page"]{color:var(--text); border-color:var(--violet); background:color-mix(in srgb, var(--violet) 14%, transparent);}
  .nav-links a[aria-current="page"]::after{display:none;}
  .wrap{padding:0 20px;}
  .gallery{padding:44px 0 60px;}
  .gallery-head{margin-bottom:32px;}
  .cards{grid-template-columns:1fr;}

  /* painel vira gaveta embaixo e deixa a metade de cima do modelo visível */
  .panel{top:auto; right:0; left:0; bottom:0; width:auto; max-height:52%; border-radius:20px 20px 0 0; border-bottom:none;}
}
@media (max-width: 640px){
  .btn-icon{width:42px; height:42px; padding:0; gap:0; justify-content:center;}
  .btn-icon .ico{display:block;}
  .btn-icon .btn-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .nav-cta{gap:10px;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

.panel-note{font-size:0.8rem; color:var(--text-muted); border:1px dashed var(--line-strong); border-radius:12px; padding:10px 12px; margin-bottom:16px;}