:root{
  --bg:#f6f4ef; --panel:#fffdf9; --ink:#22262e; --muted:#6c707a; --line:#e3dfd5;
  --accent:#8a6d3b; --accent-ink:#fff; --soft:#f1ece2; --ok:#3d7a4f; --warn:#a4532c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.top{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.marca{font:600 21px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em}
.guardado{margin-left:auto;font-size:12px;color:var(--muted)}
.app{display:grid;grid-template-columns:minmax(380px,460px) 1fr;height:calc(100% - 54px)}
.panel{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.pasos{list-style:none;margin:0;padding:14px 20px 0;display:flex;gap:6px;flex-wrap:wrap;counter-reset:p}
.pasos li{counter-increment:p}
.pasos button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 11px;font:500 12px inherit;color:var(--muted);cursor:pointer}
.pasos button:before{content:counter(p) ". "}
.pasos button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pasos button.hecho{color:var(--ink)}
#form{flex:1;overflow:auto;padding:6px 20px 20px}
h2.titulo{font:600 26px/1.2 "Cormorant Garamond",Georgia,serif;margin:16px 0 4px}
p.ayuda{color:var(--muted);margin:0 0 14px}
.grupo{border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0;background:#fff}
.grupo.apagado .cuerpo{display:none}
.grupo h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px}
.grupo .cuerpo{margin-top:10px}
label.campo{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
input[type=text],input[type=email],input[type=date],input[type=time],input[type=url],textarea,select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px;background:#fff}
textarea{resize:vertical;min-height:70px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fila3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.hint{font-size:11.5px;color:var(--muted);margin:4px 0 0}
.hint.error{color:var(--warn)}
.hint.ok{color:var(--ok)}
.switch{position:relative;display:inline-block;width:36px;height:20px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#cfcac0;border-radius:20px;transition:.15s}
.switch span:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(16px)}
.check{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13.5px}
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tarjeta{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.tarjeta b{display:block;font-size:13px}
.tarjeta small{color:var(--muted);font-size:11.5px}
.tarjeta.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.paletas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.paleta{border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.paleta.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.paleta .mues{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-bottom:6px}
.paleta .mues i{flex:1}
.paleta span{font-size:12px}
.colores{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.colores label{font-size:11.5px;color:var(--muted)}
.colores input{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.lista .item{display:grid;gap:6px;grid-template-columns:1fr auto;align-items:start;margin:6px 0}
.lista .item .campos{display:grid;gap:6px}
.lista .item .campos.c2{grid-template-columns:90px 1fr}
.lista .item .campos.c3{grid-template-columns:1.3fr 1fr 1fr}
.btn{border:0;border-radius:999px;padding:9px 18px;font:600 13px inherit;cursor:pointer;background:var(--ink);color:#fff}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.mini{padding:5px 10px;font-size:12px}
.btn.quitar{background:transparent;border:1px solid var(--line);color:var(--muted);padding:6px 9px;border-radius:8px}
.btn.grande{padding:12px 24px;font-size:14px;background:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.nav-pasos{display:flex;justify-content:space-between;gap:10px;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel)}
.revision{list-style:none;padding:0;margin:10px 0}
.revision li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px dashed var(--line)}
.revision li:before{content:"✓";color:var(--ok);font-weight:700}
.revision li.falta:before{content:"!";color:var(--warn)}
.resultado{background:var(--soft);border-radius:12px;padding:14px;margin-top:14px}
.resultado.ok{background:#e7f1e9}
.previa{display:flex;flex-direction:column;min-width:0;min-height:0}
.previa-barra{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.url{font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.dispositivos{margin-left:auto;display:flex;gap:4px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 11px;font:500 12px inherit;cursor:pointer;color:var(--muted)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.marco{flex:1;display:flex;justify-content:center;padding:16px;min-height:0;overflow:auto}
.marco iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.marco.movil iframe{width:390px;max-width:100%}
.solo-movil{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr;height:auto}
  .panel{border-right:0;min-height:calc(100vh - 54px)}
  .previa{display:none;position:fixed;inset:0;z-index:20;background:var(--bg)}
  .previa.abierta{display:flex}
  .solo-movil{display:inline-block}
  .dispositivos{display:none}
  .url{max-width:none;flex:1}
  .tarjetas,.paletas{grid-template-columns:repeat(2,1fr)}
  .colores{grid-template-columns:repeat(2,1fr)}
  #form{padding:6px 16px 20px}
  .pasos{padding:12px 16px 0}
  .nav-pasos{position:sticky;bottom:0;padding:12px 16px}
}