/* Loja Sonho de Gêmeos: layout de computador (v3, 2026-11-10).
   Este arquivo é carregado com media="(min-width:1024px)": abaixo disso ele não vale e o celular fica como está.
   Cada página marca o body com data-pg="loja|pedido|muro". As peças .so-pc só existem aqui; as .so-cel somem aqui. */

.so-cel{display:none!important}

/* ================= vitrine ================= */
[data-pg=loja] .app{--col:1200px;--pad:32px;width:calc(100% - 56px)}
[data-pg=loja] .topo{padding:12px var(--pad)}
[data-pg=loja] .topo b{font-size:16px}
[data-pg=loja] .topo a:hover{color:var(--tx)}

/* grade de 6 colunas: criador em cima, muro e guia lado a lado, os três degraus, história e lambe lado a lado */
[data-pg=loja] main{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;padding:0 var(--pad)}
[data-pg=loja] main > .capa{order:-3;grid-column:1/-1;margin:0 calc(-1 * var(--pad))}
[data-pg=loja] main > .volta-ja{order:-4;grid-column:1/-1;margin:24px 0 0}   /* como no celular: o aviso vem antes de tudo */
[data-pg=loja] main > .criador{order:-2;grid-column:1/-1;margin:0}
[data-pg=loja] #muro{order:1;grid-column:span 3}
[data-pg=loja] #guia{order:2;grid-column:span 3}
[data-pg=loja] #degraus{order:3;grid-column:1/-1;margin:0}
[data-pg=loja] #dupla{order:4;grid-column:1/-1;margin:0}

/* criador grátis: texto de um lado, imagem do outro (sem a imagem, o texto ocupa tudo) */
[data-pg=loja] .criador{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;min-height:260px}
[data-pg=loja] .criador:has(.cr-img.sem){grid-template-columns:minmax(0,1fr)}
[data-pg=loja] .cr-txt{align-content:center;gap:12px;padding:40px 48px}
[data-pg=loja] .cr-txt h2{font-size:clamp(30px,3vw,42px);line-height:1.08}
[data-pg=loja] .cr-txt p{font-size:17px;max-width:46ch}
[data-pg=loja] .cr-txt .btn{width:auto;min-height:56px;padding:0 32px;font-size:17px;margin-top:8px}
[data-pg=loja] .cr-img{aspect-ratio:auto;max-height:none;height:100%;min-height:260px}

/* os três degraus lado a lado; história e lambe lado a lado (só aparecem os que o servidor lista) */
[data-pg=loja] .deg-grade,[data-pg=loja] .dupla{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}
[data-pg=loja] .dupla{grid-template-columns:none}
[data-pg=loja] .deg-tit{font-size:26px;margin-bottom:6px}
[data-pg=loja] .deg-sub{font-size:15px;margin-bottom:20px}
[data-pg=loja] .degrau .cap{gap:12px;padding:24px}
[data-pg=loja] .degrau h3{font-size:20px}
[data-pg=loja] .degrau .valor{font-size:26px}
[data-pg=loja] .degrau .leva{font-size:15px;flex:1}
[data-pg=loja] .degrau .btn{margin-top:auto}
/* topo em duas colunas: texto, botões e preços de um lado; o muro de exemplo grande do outro */
[data-pg=loja] .capa{height:auto;min-height:452px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:44px var(--pad) 48px}
[data-pg=loja] .capa > img{opacity:.3;object-position:50% 26%}
[data-pg=loja] .capa::after{background:linear-gradient(90deg,var(--bg) 4%,color-mix(in srgb,var(--bg) 62%,transparent) 52%,var(--bg) 100%),linear-gradient(180deg,#0000 55%,var(--bg) 100%)}
[data-pg=loja] .capa .in{position:relative;left:auto;right:auto;bottom:auto}
[data-pg=loja] .capa h1{margin:16px 0 12px;font-size:clamp(40px,4.3vw,60px);line-height:1.04;text-wrap:balance}
[data-pg=loja] .capa .sub{font-size:18px}
.capa-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.capa-acoes .btn{width:auto;min-height:56px;padding:0 28px;font-size:16px}
.capa-precos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.capa-precos a{display:flex;flex-direction:column;gap:2px;min-width:92px;padding:10px 10px;border-radius:12px;border:1px solid var(--line);background:#0a1030c7;transition:border-color .12s ease,transform .12s ease,background-color .12s ease}
.capa-precos a:hover{border-color:var(--a1);background:#121a46;transform:translateY(-2px)}
.capa-precos span{font-size:12.5px;font-weight:600;color:var(--mu);white-space:nowrap}
.capa-precos b{font-size:22px;font-weight:800;line-height:1.1;color:var(--a1)}
.capa-muro{position:relative;z-index:2;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#26140e;box-shadow:0 34px 70px -34px #000,0 0 90px -46px var(--glow);transform:rotate(1.2deg)}
[data-pg=loja] .capa .capa-muro img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;opacity:1}

/* cartões de produto lado a lado, com o preço e o botão alinhados embaixo */
[data-pg=loja] .prod{margin:0;display:flex;flex-direction:column;scroll-margin-top:88px;transition:border-color .15s ease,transform .15s ease}
[data-pg=loja] .prod:hover{border-color:#4c5aa8;transform:translateY(-3px)}
[data-pg=loja] .prod.esgotado:hover,[data-pg=loja] .prod.sem-vaga:hover{transform:none}
[data-pg=loja] .prod .arte,[data-pg=loja] .prod .guia-capa{aspect-ratio:16/10}
[data-pg=loja] .prod .cap{flex:1;display:flex;flex-direction:column;padding:20px}
[data-pg=loja] .prod h2{font-size:22px}
[data-pg=loja] .prod .cap > .linha{margin-top:auto;padding-top:8px}
[data-pg=loja] .guia-capa span{font-size:26px}

[data-pg=loja] footer{columns:2;column-gap:48px;margin-top:40px;padding:48px var(--pad);border-top:1px solid var(--line)}
[data-pg=loja] footer h2{column-span:all;font-size:20px;margin-bottom:16px}
[data-pg=loja] footer .nota{font-size:14px;break-inside:avoid}
[data-pg=loja] footer .fino{column-span:all}
[data-pg=loja] footer a:hover{color:var(--a1)}

/* a barra fixa "Quero meu nome" é só do celular */
.barra{display:none!important}

/* ================= formulário: painel centralizado, prévia grande ao lado dos campos ================= */
dialog.folha{width:min(980px,calc(100vw - 64px));margin:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 40px 90px -30px #000}
dialog.folha[data-produto=guia],dialog.folha[data-produto=figurante],dialog.folha[data-produto=participacao],dialog.folha[data-produto=fala],dialog.folha[data-produto=historia],dialog.folha[data-produto=lambe]{width:min(920px,calc(100vw - 64px))}
dialog.folha::backdrop{background:#03051ad9}
.folha form{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(90vh,880px)}
dialog.folha[data-produto=guia] form,dialog.folha[data-produto=figurante] form,dialog.folha[data-produto=participacao] form,dialog.folha[data-produto=fala] form,dialog.folha[data-produto=historia] form,dialog.folha[data-produto=lambe] form{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
.folha-topo{grid-column:1/-1;padding:12px 12px 12px 28px}
.folha-topo h2{font-size:20px}
.folha .fecha{cursor:pointer}
.folha-lado{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;gap:20px;min-height:0;overflow:auto;padding:28px;background:#0b1238;border-right:1px solid var(--line)}
.folha-corpo{grid-column:2;grid-row:2;padding:24px 28px}
.folha-pe{grid-column:2;grid-row:3;padding:16px 28px 20px}
.folha-corpo .prev{display:none}   /* a prévia pequena dá lugar à grande do painel */
.lado{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:0}
.lado h3{font-size:18px}
.lado .passos li{font-size:14px}
.lado-nota{font-size:12.5px;line-height:1.5;color:var(--mu2)}
.lado-total{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.lado-total span{font-size:13px;font-weight:600;color:var(--mu)}
.lado-total strong{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.01em}
/* um pedaço do muro: céu em cima, chão embaixo, e a parede (80% da altura) é onde o nome é pintado */
.mural{position:relative;flex:1;min-height:340px;display:grid;place-items:center;overflow:hidden;border-radius:16px;border:3px solid #26140e;
  background:linear-gradient(180deg,#5a3a78 0,#f3b27a 10%,#0000 10%),linear-gradient(100deg,#e8b890,#c98a78 45%,#7e5270)}
.mural::before{content:"";position:absolute;left:0;right:0;top:10%;border-top:3px solid #26140e}
.mural::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10%;background:#6e5060;border-top:3px solid #26140e}
#prev-g{position:relative;z-index:1;display:inline-block;max-width:none;font-weight:800;letter-spacing:.02em;line-height:1;white-space:nowrap;color:#f6a53c;-webkit-text-stroke:.14em #26140e;paint-order:stroke fill;transition:font-size .15s ease,color .15s ease}
#prev-g.frase{max-width:90%;white-space:normal;text-align:center;line-height:1.04;text-wrap:balance;overflow-wrap:anywhere}
#prev-g:empty::before{content:attr(data-vazio);font-size:15px;font-weight:600;letter-spacing:0;color:#2a1420;-webkit-text-stroke:0}

/* morador desenhado grande e prévia do lambe no painel; no corpo do formulário essas peças só existem no celular */
#c-ficha,#c-lprev{display:none}
.mor-grande{display:grid;justify-items:center;gap:8px;padding:20px 16px 12px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#1a2466,#0b1238)}
.mor-grande .mor-svg{width:min(100%,210px)}
.mor-grande .mor-nome{font-size:20px}
.lado .lp-slot{padding:32px 20px}
.lado .lambe-prev{width:min(100%,270px);min-height:300px}
.lado .lambe-prev .l-tit{font-size:26px}
.lado .lambe-prev .l-txt{font-size:15px}
.lado .lambe-prev .l-ico svg{width:56px;height:56px}

/* ================= pedido e Pix ================= */
[data-pg=pedido] .app{--col:1080px;--pad:32px;width:calc(100% - 56px)}
[data-pg=pedido] .topo{padding:12px var(--pad)}
[data-pg=pedido] .topo b{font-size:16px}
[data-pg=pedido] .topo a:hover{color:var(--tx)}
[data-pg=pedido] main.pedido{max-width:680px;margin:0 auto;padding:40px var(--pad) 16px;gap:20px}
[data-pg=pedido] main.pedido h1{font-size:32px}
/* com o QR Code na tela: passos e botão de um lado, QR grande do outro (a pessoa lê com o celular) */
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])){max-width:none;grid-template-columns:minmax(0,1fr) 420px;column-gap:40px;grid-template-rows:repeat(6,auto) 1fr auto;align-items:start;
  grid-template-areas:"h qr" "total qr" "passos qr" "copiar qr" "espera qr" "cod qr" ". qr" "nota nota"}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > h1{grid-area:h}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > .total{grid-area:total}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > .caixa:has(.passos){grid-area:passos}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > #copiar{grid-area:copiar}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > .espera{grid-area:espera}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > div:has(> #cod){grid-area:cod}
[data-pg=pedido] main.pedido:has(#qrbox:not([hidden])) > p.comp{grid-area:nota}
[data-pg=pedido] #qrbox{grid-area:qr;position:sticky;top:84px;gap:16px;padding:28px}
[data-pg=pedido] #qrbox h2{font-size:20px;margin:0}
[data-pg=pedido] #qrbox .qr{width:auto;padding:16px;border-radius:18px}
[data-pg=pedido] #qrbox .qr img,[data-pg=pedido] #qrbox .qr canvas{width:320px;height:320px;image-rendering:pixelated}
[data-pg=pedido] .caixa .passos li{font-size:15px}
[data-pg=pedido] .caixa p.pc-alt{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mu2)}
[data-pg=pedido] .copia{cursor:text}
[data-pg=pedido] .caixa a:hover{color:var(--a1)}

/* ================= muro: tela cheia, busca sempre à vista ao lado do título ================= */
[data-pg=muro] .mapa{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);grid-template-rows:auto minmax(0,1fr) auto}
[data-pg=muro] .mbarra{grid-column:1;grid-row:1;padding:10px 16px 10px 12px;border-bottom:1px solid var(--line)}
[data-pg=muro] .mbarra h1{font-size:18px}
[data-pg=muro] .busca{grid-column:2;grid-row:1;display:flex;align-items:center;padding:10px 16px 10px 0}
[data-pg=muro] .busca svg{left:16px;top:50%}
[data-pg=muro] .busca input{min-height:44px}
[data-pg=muro] .busca input:hover{border-color:#4c5aa8}
[data-pg=muro] .res{left:0;right:16px;top:calc(100% - 4px)}
[data-pg=muro] .palco{grid-column:1/-1;grid-row:2}
[data-pg=muro] .mrod{grid-column:1/-1;grid-row:3;justify-content:center;gap:16px;padding:10px 16px}
[data-pg=muro] .mrod .info{flex:none;min-width:280px;font-size:14px}
[data-pg=muro] .zoom{right:20px;bottom:20px}
[data-pg=muro] .dica-arrasto{left:20px;bottom:20px;padding:8px 14px;font-size:13px}

@media (min-width:1440px){
  [data-pg=loja] .app{--col:1340px;--pad:40px}
  [data-pg=loja] main{gap:28px}
  [data-pg=loja] .capa{min-height:500px;gap:64px}
  [data-pg=loja] .prod .cap{padding:24px}
  dialog.folha{width:min(1040px,calc(100vw - 64px))}
  .folha form{grid-template-columns:minmax(0,1fr) 460px}
  [data-pg=pedido] .app{--col:1160px}
  [data-pg=pedido] main.pedido:has(#qrbox:not([hidden])){grid-template-columns:minmax(0,1fr) 440px;column-gap:56px}
}

/* ---------- v4: criador de morador (criar.html): prévia de um lado, opções do outro ---------- */
.pg-criar .app.cr{--col:1120px;max-width:1120px;min-height:0;height:calc(100vh - 56px);overflow:hidden}
.pg-criar .cr-topo{padding:12px 28px;border-bottom:1px solid var(--line)}
.pg-criar .cr-topo h1{font-size:22px;text-align:left}
.pg-criar .cr-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);flex:1;min-height:0}
.pg-criar .cr-palco{position:relative;border:0;border-right:1px solid var(--line);min-height:0}
.pg-criar .cr-svg{height:100%;max-height:none}
.pg-criar .cr-acoes{bottom:20px;padding:0 20px}
.pg-criar .cr-mini{min-height:48px;padding:0 20px;font-size:14px}
.pg-criar .cr-painel{min-height:0;overflow-y:auto;padding-bottom:0}
.pg-criar .cr-abas{padding:16px 24px 0;gap:8px;position:static}
.pg-criar .cr-aba{font-size:15px}
.pg-criar .cr-opcoes{padding:24px 28px 0;gap:22px}
.pg-criar .cr-nome{padding:24px 28px 0}
.pg-criar .cr-pe{position:sticky;left:auto;bottom:0;transform:none;width:auto;margin-top:auto;padding:16px 28px 20px}
.pg-criar .cr-op:hover{border-color:#4c5aa8}
.pg-criar .cr-res{grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"t t" "f f2" "fig bot" "fig mais" "fig fim";column-gap:40px;align-content:start;padding:28px 40px;overflow-y:auto;flex:1;min-height:0}
.pg-criar .cr-res h2{grid-area:t;text-align:left;font-size:26px}
.pg-criar .cr-formatos{grid-area:f;margin:0}
.pg-criar .cr-fig{grid-area:fig;width:100%;align-self:start}
.pg-criar .cr-fig.feed{width:100%}
.pg-criar .cr-botoes{grid-area:bot}
.pg-criar .cr-mais{grid-area:mais}
.pg-criar .cr-fim{grid-area:fim}
.pg-criar .cr-degraus{grid-template-columns:repeat(3,1fr)}
.pg-criar .cr-degrau{grid-template-columns:1fr;align-content:start}
.pg-criar .cr-degrau i{grid-column:1;grid-row:auto}