/* Editor do site (mobile-first): formulário em etapas + prévia ao vivo */
html,body{height:100%}
body{background:var(--off)}
.ebar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px clamp(12px,2.4vw,24px);background:rgba(246,241,233,.97);border-bottom:1px solid var(--linha);min-height:56px}
.ebar__logo img{height:28px;width:auto}
.dots{list-style:none;display:flex;gap:6px;flex:1;justify-content:center;min-width:0}
.dots button{display:flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:6px 4px;font-size:13px;font-weight:600;color:var(--soft);white-space:nowrap}
.dots button i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linha2);font-style:normal;font-size:12px;transition:all .3s}
.dots button.is-done i{background:var(--marinho);color:#fff;box-shadow:none}
.dots button.is-on{color:var(--marinho)}
.dots button.is-on i{background:var(--limao);box-shadow:none;transform:scale(1.12)}
.dots button span{display:none}
.dots button.is-on span{display:inline}
.dots button[disabled]{cursor:default;opacity:.5}
@media (max-width:760px){.dots{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.dots::-webkit-scrollbar{display:none}.dots button.is-on span{display:none}.dots button{padding:6px 2px}}
.saved{font-size:12.5px;color:var(--soft);white-space:nowrap;min-width:60px;text-align:right}
.saved.is-err{color:var(--tomate)}

.ed{display:grid;grid-template-columns:minmax(380px,520px) 1fr;min-height:calc(100vh - 57px);min-height:calc(100dvh - 57px)}
.ed > *{min-width:0}
.ed__form{display:flex;flex-direction:column;background:var(--papel);border-right:1px solid var(--linha)}
.pane{flex:1;padding:clamp(22px,3vw,34px) clamp(16px,3vw,34px) 30px;display:flex;flex-direction:column;gap:18px;animation:pin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pin{from{opacity:0;transform:translateX(18px)}}
.pane h1{font:400 clamp(34px,4vw,44px)/1.04 var(--serif);color:var(--marinho)}
.pane h1 em{font-style:italic;color:var(--tomate)}
.pane > .lede{margin-top:-6px;font-size:16px}
.pane h2{font:400 26px/1.1 var(--serif);color:var(--marinho);margin-top:8px}
.nav{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:12px clamp(16px,3vw,34px) calc(12px + env(safe-area-inset-bottom,0px));background:rgba(252,249,242,.97);border-top:1px solid var(--linha)}
.nav .btn{min-width:120px}

.box{background:#fff;border-radius:18px;padding:18px;box-shadow:0 0 0 1px var(--linha);display:flex;flex-direction:column;gap:14px}
.box__h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.box__h b{font:400 21px var(--serif);color:var(--marinho)}
.rm{border:0;background:none;color:var(--tomate);font-size:13.5px;font-weight:600;cursor:pointer;padding:6px}
.add{align-self:flex-start;border:1.5px dashed var(--linha2);background:none;border-radius:14px;padding:12px 16px;font-weight:600;color:var(--marinho);cursor:pointer;width:100%}
.add:hover{border-color:var(--marinho)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linha2);border-radius:999px;padding:8px 13px;font-size:14px;font-weight:600;color:var(--marinho);cursor:pointer}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--marinho)}
.slug{display:flex;align-items:stretch;border:1.5px solid var(--linha2);border-radius:14px;background:#fff;overflow:hidden}
.slug span{display:flex;align-items:center;padding:0 4px 0 12px;font-size:14px;color:var(--soft);white-space:nowrap;background:var(--off)}
.slug .inp{border:0;border-radius:0;padding-left:6px;box-shadow:none!important}
.slug:focus-within{border-color:var(--marinho);box-shadow:0 0 0 4px rgba(16,73,127,.1)}
.ok{font-size:13px;font-weight:600}
.ok.is-ok{color:var(--verde)}.ok.is-no{color:var(--tomate)}
.geo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;font-weight:400;color:var(--soft)}
.geo button{border:0;background:var(--off);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--marinho);cursor:pointer}
.geo.is-ok{color:var(--verde)}
.hl{background:var(--marinho);color:#fff;border-radius:18px;padding:16px 18px;font-size:15px;display:flex;gap:12px;align-items:center}
.hl b{font:400 30px/1 var(--serif);color:var(--limao)}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.foto{position:relative;border-radius:12px;overflow:hidden;background:var(--off);box-shadow:0 0 0 1px var(--linha)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto button{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--tomate);font-size:18px;cursor:pointer;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.pick{position:relative;display:grid;place-items:center;text-align:center;border-radius:12px;border:1.5px dashed var(--linha2);color:var(--marinho);font-size:13.5px;font-weight:600;cursor:pointer;padding:10px;min-height:110px}
.pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cores{display:flex;flex-wrap:wrap;gap:10px}
.cor{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px 6px 4px 4px;box-shadow:0 0 0 1px var(--linha)}
.cor input[type=color]{width:34px;height:34px;border:0;border-radius:50%;padding:0;background:none;cursor:pointer}
.cor input[type=color]::-webkit-color-swatch-wrapper{padding:0}.cor input[type=color]::-webkit-color-swatch{border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.cor .inp{width:96px;padding:7px 8px;border-radius:999px;font-size:14px}
.cor button{border:0;background:none;color:var(--soft);cursor:pointer;font-size:18px;padding:0 4px}
.sum{display:grid;gap:8px;font-size:15px}
.sum li{display:flex;gap:10px;list-style:none}
.sum li::before{content:"✓";color:var(--verde);font-weight:700}
.sum li.no::before{content:"○";color:var(--soft)}
.price{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price b{display:block;font:400 56px/1.1 var(--serif);color:var(--marinho);margin-top:4px}
.price small{font-size:14px;color:var(--soft)}
.live{display:flex;flex-direction:column;gap:10px}
.live a.btn{justify-content:space-between}
.models{display:grid;gap:12px}
.mdl{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;text-align:left;border:0;background:#fff;border-radius:18px;padding:10px;box-shadow:0 0 0 1.5px var(--linha);cursor:pointer;transition:box-shadow .2s, transform .2s}
.mdl:hover{transform:translateY(-2px)}
.mdl.is-on{box-shadow:0 0 0 2.5px var(--marinho)}
.mdl img{width:110px;aspect-ratio:9/12;object-fit:cover;object-position:top;border-radius:12px}
.mdl b{font:400 24px/1.1 var(--serif);color:var(--marinho);display:block}
.mdl small{font-size:13.5px;color:var(--soft)}

/* prévia */
.ed__pv{position:sticky;top:57px;height:calc(100vh - 57px);height:calc(100dvh - 57px);display:flex;flex-direction:column;background:#e9e4da}
.pv__bar{display:flex;align-items:center;gap:12px;padding:10px 16px}
.seg{display:inline-flex;background:#fff;border-radius:999px;padding:3px;box-shadow:0 0 0 1px var(--linha)}
.seg button{border:0;background:none;border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--soft);cursor:pointer}
.seg button.is-on{background:var(--marinho);color:#fff}
.pv__lbl{font-size:12.5px;color:var(--soft);letter-spacing:.06em}
.pv__lbl::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verde);margin-right:6px;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.3}}
.pv__x{display:none;margin-left:auto}
.pv__box{position:relative;flex:1;overflow:hidden;display:grid;place-items:center}
.pv__dev{position:absolute;left:50%;top:50%;transform-origin:50% 50%;background:#fff;box-shadow:0 30px 60px -30px rgba(16,40,70,.6);overflow:hidden}
.pv__dev.is-m{border-radius:38px;border:10px solid #111}
.pv__dev.is-d{border-radius:10px;border-top:22px solid #d9d4ca}
.pv__dev iframe{border:0;width:100%;height:100%;display:block;background:#fff}
.pv__veil{position:absolute;inset:0;pointer-events:none;background:rgba(233,228,218,.55);opacity:0;transition:opacity .25s}
.pv__veil.is-on{opacity:1}
.pvnav{display:none}

@media (max-width:900px){
  .ed{grid-template-columns:1fr}
  .ed__form{border-right:0;min-height:calc(100vh - 57px);min-height:calc(100dvh - 57px)}
  .ed__pv{position:fixed;inset:0;top:0;height:100%;z-index:60;transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  body.pv-open .ed__pv{transform:none;visibility:visible}
  body.pv-open{overflow:hidden}
  .pv__x{display:inline-flex}
  .pvnav{display:inline-flex;min-width:0!important;padding-inline:18px}
  .nav .btn{min-width:0;flex:1}
  .nav .pvnav{flex:none}
  .pv__lbl{display:none}
}

/* recorte */
.crop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:12px;background:rgba(10,25,45,.6)}
.crop__b{width:min(640px,100%);max-height:100%;overflow:auto;background:var(--papel);border-radius:24px;padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.crop__b h3{font:400 28px/1.1 var(--serif);color:var(--marinho)}
.crop__f{position:relative;width:100%;max-height:62vh;margin:0 auto;overflow:hidden;background:#222;border-radius:10px;touch-action:none;cursor:grab;box-shadow:0 0 0 2px var(--marinho)}
.crop__f img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none}
.crop__f::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 33.3% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 66.6% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 0 33.3%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 0 66.6%/100% 1px no-repeat}
.crop__z{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--marinho)}
.crop__z input{flex:1;accent-color:var(--marinho);height:28px}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 200%;z-index:100;background:var(--marinho);color:#fff;border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;transition:translate .35s;max-width:calc(100% - 32px);text-align:center}
.toast.is-on{translate:-50% 0}
#toast:empty{visibility:hidden}

/* ===== 15/out: celular centralizado (regra do Léo) ===== */
@media (max-width:640px){
  .pane{text-align:center}
  .pane h1,.pane h2,.pane > .lede{text-align:center;margin-inline:auto}
  .box{text-align:center}
  .box__h{justify-content:center;gap:12px}
  .add{align-self:center}
  .chips,.cores,.geo{justify-content:center}
  .slug span{justify-content:center}
  .hl{flex-direction:column;text-align:center}
  .sum{justify-items:center}
  .sum li{justify-content:center}
  .price{flex-direction:column;align-items:center;text-align:center}
  .live a.btn{justify-content:center;gap:8px}
  .mdl{grid-template-columns:1fr;justify-items:center;text-align:center}
  .mdl img{width:150px}
  .fotos{justify-content:center}
}
/* pular foto de capa / história (20/out) */
.pular-foto{display:block;margin-top:14px;font-size:14px;text-underline-offset:3px}
.box.is-pulado{background:rgba(16,73,127,.04)}
@media (max-width:600px){.pular-foto{margin-left:auto;margin-right:auto;text-align:center}}

/* etapa "Visual" do modelo Em branco (10/nov) */
.pals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.pal{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;border-radius:12px;cursor:pointer;font:inherit;color:inherit}
.pal i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pal i b{width:20px;height:20px;border-radius:50%}
.pal small{font-size:12px;line-height:1.2;text-align:center}
.pal.is-on i,.fnt.is-on{box-shadow:0 0 0 2px #10497F}
.cpick{display:flex;align-items:center;gap:10px;margin-top:6px}
.cpick input{width:44px;height:36px;border:0;padding:0;background:none;cursor:pointer}
.cpick code{font-size:13px;color:#4f6580}
.fonts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fnt{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:0;border-radius:14px;padding:14px 8px;cursor:pointer;box-shadow:0 0 0 1px rgba(16,73,127,.14);color:#14263d}
.fnt span{font-size:24px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.fnt small{font-size:12px;color:#4f6580}
@media (max-width:420px){.pals{grid-template-columns:repeat(4,1fr);gap:4px}.fnt span{font-size:20px}}