/* Crear: asistente por pasos con vista previa en vivo */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding-bottom:10px}
.steps i{height:4px;border-radius:2px;background:var(--fill-3);overflow:hidden;position:relative}
.steps i::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--out)}
.steps i.on::after{transform:none}

.create{display:grid;gap:40px;padding-block:8px 40px}
.cstep{display:grid;gap:18px;align-content:start}
.cstep.fwd{animation:stepF .55s var(--out) both}
.cstep.bwd{animation:stepB .55s var(--out) both}
@keyframes stepF{from{opacity:0;transform:translateX(40px)}}
@keyframes stepB{from{opacity:0;transform:translateX(-40px)}}
.cstep .large{padding-bottom:4px}

/* 1. evento */
.evs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.evc{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:118px;padding:14px;border-radius:var(--r-lg);
  background:var(--bg-2);text-align:left;overflow:hidden;isolation:isolate;transition:transform .45s var(--spring),box-shadow .3s}
.evc b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.evc small{display:block;font-size:12px;color:var(--label-2);font-weight:500;margin-top:2px}
.evc-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--ic-bg);color:var(--ic-fg);box-shadow:var(--ic-ring)}
.evc-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.evc:disabled{cursor:default}
.evc:disabled .evc-ic{background:var(--fill-3);color:var(--label-2);box-shadow:none}
.evc:disabled b{color:var(--label-2)}
.evc:not(:disabled):active{transform:scale(.97)}
.evc.main{grid-column:1/-1;min-height:220px;padding:20px;background:#0d1730;justify-content:flex-end}
.evc.main img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transition:transform 1.2s var(--out)}
.evc.main::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,10,28,.92),rgba(4,10,28,.2) 70%)}
.evc.main:hover img{transform:scale(1.05)}
.evc.main b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff}
.evc.main small{font-size:15px;color:rgba(255,255,255,.78)}
.evc.main .evc-ic{position:absolute;top:18px;left:18px;color:#fff;box-shadow:none;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.evc .badge{position:absolute;top:18px;right:18px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:#fff;color:#000}
.evc[aria-pressed=true]{box-shadow:0 0 0 3px var(--tint)}

/* 2. diseño */
.tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.tpls{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tplc{display:grid;gap:12px;justify-items:center;padding:16px 12px 14px;border-radius:var(--r-lg);background:var(--bg-2);transition:transform .45s var(--spring),box-shadow .3s}
.tplc>div{width:100%;max-width:170px}
.tplc b{font-size:15px;font-weight:600}
.tplc small{display:block;font-size:12px;color:var(--label-2);font-weight:500;text-align:center}
.tplc:not(.soon):active{transform:scale(.97)}
.tplc[aria-pressed=true]{box-shadow:0 0 0 3px var(--tint)}
.tplc.soon{cursor:default}
.tplc.soon .ghost{width:100%;max-width:170px;aspect-ratio:9/19.3;border-radius:22px;border:1.5px dashed var(--fill);display:grid;place-items:center;color:var(--label-3)}
.tplc.soon .ghost svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* 3. datos */
.more-h{margin-top:14px;padding-inline:4px}
.acc{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden}
.ag{position:relative}
.ag+.ag::before{content:"";position:absolute;top:0;left:62px;right:0;height:.5px;background:var(--sep);z-index:1}
.ag>summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px;cursor:pointer;transition:background-color .2s}
.ag>summary::-webkit-details-marker{display:none}
.ag>summary:active{background:var(--bg-3)}
.ag>summary .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;color:var(--ic-fg);background:var(--ic-bg);box-shadow:var(--ic-ring)}
.ag>summary .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag>summary .tx{flex:1;display:grid;gap:1px;min-width:0}
.ag>summary .tx small{font-size:13px;color:var(--label-2)}
.ag>summary .chev{width:8px;height:14px;fill:none;stroke:var(--label-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--out)}
.ag[open]>summary .chev{transform:rotate(90deg)}
.ag-b{margin:0 12px 14px;background:var(--bg-3);border-radius:var(--r)}
.ag-b .field input,.ag-b .field textarea{background:none}
.btn.lg{min-height:54px;margin-top:6px}

/* 4. revisar */
.summary .row{min-height:46px}
.summary .row span{color:var(--label-2)}
.summary .row b{margin-left:auto;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.actions{display:grid;gap:6px}
.review-dev{width:min(250px,64vw);margin:6px auto 10px}

.live{display:none}
.live .phone-wrap{width:300px;margin-inline:auto}
.live p{text-align:center;font-size:13px;color:var(--label-3);margin-top:16px}

.done-ov{position:fixed;inset:0;z-index:300;display:grid;place-items:center;text-align:center;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:fade .35s var(--ease)}
.done-ov h2{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:18px}
.done-ov p{color:var(--label-2);margin-top:4px}
.done-ov .check{width:96px;height:96px;margin:0 auto;animation:pop .6s var(--spring)}
.check circle{fill:var(--green)}
.check path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .25s var(--out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

@media (min-width:960px){
  .create{grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start;padding-top:24px}
  .live{display:block;position:sticky;top:110px}
  .review-dev{display:none}
  .evc.main{min-height:280px}
}