.commerce-demo { --commerce-ink:var(--ink,#f7f3ea); --commerce-paper:var(--paper,#101923); --commerce-accent:var(--rose,#d998ae); color:var(--commerce-ink); background:var(--commerce-paper); min-height:100%; font-family:var(--font-body, system-ui, sans-serif); }
.commerce-demo *, .commerce-demo *::before, .commerce-demo *::after { box-sizing:border-box; }
.commerce-demo__bar { align-items:center; background:var(--blue,#243b4a); color:#f7f3ea; display:flex; gap:1rem; min-height:4.1rem; padding:.8rem clamp(1rem,4vw,4rem); position:sticky; top:0; z-index:3; }
.commerce-demo__brand { font-family:var(--font-display, Georgia, serif); font-size:1.35rem; letter-spacing:-.04em; margin-right:auto; }.commerce-demo__brand i { color:var(--commerce-accent); font-family:var(--font-body, sans-serif); font-size:.64rem; font-style:normal; letter-spacing:.1em; text-transform:uppercase; }.commerce-demo__signal { border:1px solid color-mix(in srgb, var(--commerce-accent) 70%, transparent); color:var(--commerce-accent); font-size:.72rem; padding:.32rem .5rem; }
.commerce-demo__layout { display:grid; grid-template-columns:12.5rem minmax(0,1fr); min-height:calc(100vh - 4.1rem); }.commerce-demo__nav { background:#eae6e1; display:flex; flex-direction:column; gap:.25rem; padding:1.5rem .8rem; }.commerce-demo__nav button { background:transparent; border:0; color:var(--commerce-ink); cursor:pointer; font:inherit; padding:.65rem .8rem; text-align:left; }.commerce-demo__nav button:is(:hover,:focus-visible), .commerce-demo__nav button.is-current { background:var(--commerce-ink); color:var(--commerce-paper); outline:none; }
.commerce-demo__main { margin:0 auto; max-width:72rem; padding:clamp(2rem,6vw,6rem); width:100%; }.commerce-demo__scenario { align-items:center; border-bottom:1px solid #c9c5b7; display:flex; flex-wrap:wrap; font-size:.78rem; gap:1rem; justify-content:space-between; margin-bottom:clamp(2rem,6vw,5rem); padding-bottom:1rem; }.commerce-demo select { background:var(--commerce-paper); border:1px solid var(--commerce-ink); color:var(--commerce-ink); font:inherit; margin-left:.4rem; padding:.35rem; }.commerce-demo h1,.commerce-demo h2 { font-family:var(--font-display, Georgia, serif); font-weight:500; letter-spacing:-.045em; line-height:.98; }.commerce-demo h1 { font-size:clamp(2.6rem,6vw,5.4rem); margin:.2rem 0 1.5rem; max-width:14ch; }.commerce-demo h2 { font-size:1.8rem; margin:.15rem 0 .75rem; }.commerce-demo__eyebrow { color:#3e5261; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.commerce-demo__lead { font-size:1.18rem; line-height:1.6; max-width:46rem; }.commerce-demo__pending { color:#3e5261; font-size:.87rem; font-style:italic; }.commerce-demo__plans,.commerce-demo__split,.commerce-demo__admin-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin:2.5rem 0; }.commerce-demo__card,.commerce-demo__paper,.commerce-demo__admin-grid section,.commerce-demo__row { background:#fffcf6; border:1px solid #cbc7b9; box-shadow:7px 8px 0 rgba(36,59,74,.1); padding:clamp(1.25rem,3vw,2.25rem); }.commerce-demo__card.is-selected { border:2px solid var(--commerce-ink); box-shadow:9px 10px 0 var(--commerce-accent); }.commerce-demo__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }.commerce-demo__button { background:var(--commerce-ink); border:1px solid var(--commerce-ink); color:var(--commerce-paper); cursor:pointer; font:600 .86rem var(--font-body, sans-serif); padding:.75rem 1rem; }.commerce-demo__button:is(:hover,:focus-visible) { box-shadow:3px 3px 0 var(--commerce-accent); outline:2px solid transparent; transform:translate(-1px,-1px); }.commerce-demo__button--quiet { background:transparent; color:var(--commerce-ink); }.commerce-demo__stack { display:grid; gap:.8rem; margin:2rem 0; max-width:52rem; }.commerce-demo details { background:#fffcf6; border:1px solid #cbc7b9; padding:1rem 1.2rem; }.commerce-demo summary { cursor:pointer; font-weight:700; }.commerce-demo__field { display:grid; gap:.5rem; margin:2rem 0; max-width:30rem; }.commerce-demo input { background:#fffcf6; border:1px solid var(--commerce-ink); font:inherit; padding:.8rem; }.commerce-demo input[aria-invalid="true"] { border-color:#9c3221; }.commerce-demo__check { align-items:flex-start; display:flex; gap:.55rem; margin:1.4rem 0; }.commerce-demo__timeline { display:grid; gap:1rem; list-style:none; margin:2rem 0; padding:0; }.commerce-demo__timeline li { align-items:center; border-top:1px solid #c9c5b7; display:flex; gap:1rem; padding-top:1rem; }.commerce-demo__timeline b { background:var(--commerce-accent); border-radius:50%; display:grid; height:2rem; place-items:center; width:2rem; }.commerce-demo__facts { display:flex; flex-wrap:wrap; gap:1rem; }.commerce-demo__facts div { border-left:2px solid var(--commerce-accent); padding:.2rem 1rem; }.commerce-demo__facts dt { font-size:.75rem; text-transform:uppercase; }.commerce-demo__facts dd { margin:.3rem 0; }.commerce-demo__result-grid { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); margin:2rem 0; }.commerce-demo__status { align-items:center; background:#f2e8eb; display:flex; gap:.75rem; margin:2rem 0; padding:1rem; }.commerce-demo__status.is-rejected,.commerce-demo__status.is-interrupted { background:#f3dfd7; }.commerce-demo__status.is-pending,.commerce-demo__status.is-processing { background:#f4edcb; }.commerce-demo__gauge { align-items:center; background:conic-gradient(var(--commerce-accent) 0 72%, #ddd9cc 72%); border-radius:50%; display:grid; height:9rem; margin:1.5rem auto; place-items:center; position:relative; width:9rem; }.commerce-demo__gauge::before { background:#fffcf6; border-radius:50%; content:""; inset:.8rem; position:absolute; }.commerce-demo__gauge span,.commerce-demo__gauge small { position:relative; text-align:center; }.commerce-demo__gauge span { font-size:2rem; }.commerce-demo__gauge small { font-size:.64rem; max-width:5rem; }.commerce-demo__row { align-items:center; display:flex; gap:1rem; justify-content:space-between; }.commerce-demo__row small { display:block; margin-top:.25rem; }
@media (max-width: 700px) { .commerce-demo__bar { align-items:flex-start; flex-wrap:wrap; }.commerce-demo__signal { order:3; width:100%; }.commerce-demo__layout { display:block; }.commerce-demo__nav { flex-direction:row; overflow:auto; padding:.5rem; }.commerce-demo__nav button { flex:0 0 auto; }.commerce-demo__main { padding:2rem 1.25rem 4rem; }.commerce-demo__plans,.commerce-demo__split,.commerce-demo__admin-grid { grid-template-columns:1fr; }.commerce-demo h1 { font-size:clamp(2.55rem,13vw,4rem); }.commerce-demo__row { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { .commerce-demo *, .commerce-demo *::before { scroll-behavior:auto!important; transition:none!important; } }
.commerce-demo__bar .commerce-demo__button--quiet{color:var(--commerce-paper);border-color:#aeb8c370;background:transparent}
.commerce-demo__bar .commerce-demo__button--quiet{color:#f7f3ea}
.commerce-demo__nav{background:var(--panel,#182431)}
.commerce-demo__nav button{color:var(--commerce-ink)}
.commerce-demo__nav button:is(:hover,:focus-visible),.commerce-demo__nav button.is-current{background:var(--wine,#8b1e3f);color:#f7f3ea}
.commerce-demo select,.commerce-demo input{background:var(--panel,#182431);border-color:var(--line,#3a4a5b);color:var(--commerce-ink)}
.commerce-demo__scenario,.commerce-demo__timeline li{border-color:var(--line,#3a4a5b)}
.commerce-demo__eyebrow,.commerce-demo__pending{color:var(--muted,#aeb9c5)}
.commerce-demo__card,.commerce-demo__paper,.commerce-demo__admin-grid section,.commerce-demo__row,.commerce-demo details{background:var(--panel,#182431);border-color:var(--line,#3a4a5b);box-shadow:var(--shadow,0 16px 44px #05090d80)}
.commerce-demo__button{background:var(--wine,#8b1e3f);border-color:var(--wine,#8b1e3f);color:#f7f3ea}
.commerce-demo__button--quiet{background:transparent;color:var(--commerce-ink);border-color:var(--line,#3a4a5b)}
.commerce-demo__status{background:var(--panel-2,#223140)}
.commerce-demo__status.is-rejected,.commerce-demo__status.is-interrupted{background:color-mix(in srgb,var(--bad,#f1a0a0) 16%,var(--panel,#182431))}
.commerce-demo__status.is-pending,.commerce-demo__status.is-processing{background:color-mix(in srgb,var(--rose,#d998ae) 16%,var(--panel,#182431))}
.commerce-demo__gauge{background:transparent;border:1px dashed var(--line,#3a4a5b)}
.commerce-demo__gauge::before{background:var(--panel,#182431)}
.commerce-demo__timeline b{color:var(--blue,#243b4a)}
.commerce-demo__bar .commerce-demo__button--quiet:hover{background:#ffffff12}
/* C12/C14/C50/C53: editorial depth, selection response and restrained moving color. */
.commerce-demo{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--rose,#d998ae) 22%,transparent),transparent 26rem),radial-gradient(circle at 12% 78%,color-mix(in srgb,var(--blue,#243b4a) 58%,transparent),transparent 30rem),var(--commerce-paper)}
.commerce-demo::before,.commerce-demo::after{content:"";pointer-events:none;position:absolute;z-index:-1;border-radius:50%;filter:blur(24px);opacity:.45;animation:commerce-drift 18s ease-in-out infinite alternate}.commerce-demo::before{width:22rem;height:22rem;right:-9rem;top:20%;background:var(--wine,#8b1e3f)}.commerce-demo::after{width:16rem;height:16rem;left:-8rem;bottom:4%;background:var(--rose,#d998ae);animation-delay:-8s}
.commerce-demo[data-motion="paused"]::before,.commerce-demo[data-motion="paused"]::after{animation-play-state:paused}
html[data-motion="false"] .commerce-demo::before,html[data-motion="false"] .commerce-demo::after{animation:none}
.commerce-demo__main{max-width:78rem;padding-top:clamp(2.5rem,7vw,7rem)}
.commerce-demo__scenario{font-size:.72rem;letter-spacing:.04em;border-bottom:0;padding:.7rem 0;margin-bottom:1rem;color:var(--muted,#aeb9c5)}
.commerce-demo__progress{align-items:center;border-top:1px solid color-mix(in srgb,var(--line,#3a4a5b) 72%,transparent);display:flex;justify-content:space-between;margin:0 0 clamp(2.4rem,5vw,4.6rem);padding:1rem 0;position:relative;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.commerce-demo__progress::before{background:var(--line,#3a4a5b);content:"";height:3px;left:0;position:absolute;right:0;bottom:-2px}.commerce-demo__progress::after{background:linear-gradient(90deg,var(--rose,#d998ae),#f7f3ea);content:"";height:3px;left:0;position:absolute;bottom:-2px;transition:width .45s cubic-bezier(.16,1,.3,1);width:0}.commerce-demo__progress[data-commerce-step="2"]::after{width:16.6667%}.commerce-demo__progress[data-commerce-step="3"]::after{width:33.3333%}.commerce-demo__progress[data-commerce-step="4"]::after{width:50%}.commerce-demo__progress[data-commerce-step="5"]::after{width:66.6667%}.commerce-demo__progress[data-commerce-step="6"]::after{width:83.3333%}.commerce-demo__progress[data-commerce-step="7"]::after{width:100%}.commerce-demo__progress b{font-family:var(--font-display,Georgia,serif);font-size:1rem;color:var(--commerce-ink)}
.commerce-demo h1{font-size:clamp(3.25rem,7vw,6.4rem);max-width:11ch;text-wrap:balance;text-shadow:0 12px 36px color-mix(in srgb,var(--paper,#101923) 75%,transparent)}.commerce-demo__lead{font-size:clamp(1.1rem,1.9vw,1.42rem);max-width:39rem}.commerce-demo__eyebrow{color:var(--rose,#d998ae);font-weight:800}
.commerce-demo__plans{grid-template-columns:minmax(0,1.15fr) minmax(16rem,.85fr);align-items:stretch;gap:clamp(1rem,2.6vw,2.5rem)}.commerce-demo__card{border-radius:1.1rem;min-height:21rem;overflow:hidden;position:relative;transform:perspective(900px) rotateY(-1.5deg);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.commerce-demo__card:nth-child(2){transform:perspective(900px) rotateY(1.5deg) translateY(2.7rem)}.commerce-demo__card::before{background:linear-gradient(135deg,color-mix(in srgb,var(--rose,#d998ae) 34%,transparent),transparent 55%);content:"";inset:0;pointer-events:none;position:absolute}.commerce-demo__card>*{position:relative}.commerce-demo__card:is(:hover,:focus-within){border-color:var(--rose,#d998ae);box-shadow:18px 23px 0 color-mix(in srgb,var(--wine,#8b1e3f) 55%,transparent);transform:perspective(900px) rotateY(0) translateY(-.35rem)}.commerce-demo__card.is-selected{box-shadow:14px 16px 0 var(--wine,#8b1e3f);border-color:var(--rose,#d998ae)}
.commerce-demo__paper,.commerce-demo__admin-grid section,.commerce-demo__row,.commerce-demo details{border-radius:.75rem}.commerce-demo__split{align-items:start;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}.commerce-demo__split> :first-child{margin-top:2.7rem}.commerce-demo__split> :last-child{border-top:4px solid var(--rose,#d998ae)}
.commerce-demo__button{border-radius:999px;letter-spacing:.02em;position:relative;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.commerce-demo__button:is(:hover,:focus-visible){box-shadow:5px 6px 0 var(--rose,#d998ae);transform:translate(-2px,-2px)}.commerce-demo__button.is-selected,.commerce-demo__result-grid .commerce-demo__button[aria-pressed="true"]{background:var(--rose,#d998ae);border-color:var(--rose,#d998ae);color:var(--blue,#243b4a)}
.commerce-demo__field{max-width:none}.commerce-demo__field input{border-radius:.25rem;min-height:3rem;transition:border-color .2s ease,box-shadow .2s ease}.commerce-demo__field:focus-within small{color:var(--rose,#d998ae)}.commerce-demo__field:focus-within input{border-color:var(--rose,#d998ae);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose,#d998ae) 18%,transparent)}
.commerce-demo__status{border-left:4px solid var(--rose,#d998ae);border-radius:0 .7rem .7rem 0}.commerce-demo__timeline{counter-reset:commerce-step}.commerce-demo__timeline li{padding:1.15rem 0}.commerce-demo__timeline b{border-radius:.45rem;transform:rotate(-5deg);transition:transform .2s ease}.commerce-demo__timeline li:hover b{transform:rotate(0) scale(1.08)}
@keyframes commerce-drift{to{transform:translate3d(2rem,-1.4rem,0) scale(1.08)}}
@media (max-width:700px){.commerce-demo__main{padding-top:2.25rem}.commerce-demo__plans,.commerce-demo__split{grid-template-columns:1fr}.commerce-demo__card,.commerce-demo__card:nth-child(2){min-height:auto;transform:none}.commerce-demo__card:nth-child(2){margin-top:0}.commerce-demo__split> :first-child{margin-top:0}.commerce-demo h1{font-size:clamp(3rem,15vw,4.6rem)}.commerce-demo__progress{margin-bottom:2.25rem}}
@media (prefers-reduced-motion:reduce){.commerce-demo::before,.commerce-demo::after{animation:none}.commerce-demo__card,.commerce-demo__card:nth-child(2),.commerce-demo__button{transform:none!important;transition:none!important}}
/* Aplicación operativa: contenedores reconocibles sin perder profundidad ni color. */
.commerce-demo__signal{border-radius:999px;padding:.4rem .68rem}
.commerce-demo__nav{gap:.45rem;padding:1rem .7rem;border-right:1px solid var(--line,#3a4a5b)}
.commerce-demo__nav button{border:1px solid transparent;border-radius:.75rem;padding:.72rem .8rem;transition:background .18s ease,border-color .18s ease,color .18s ease}
.commerce-demo__nav button:is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--rose,#d998ae) 55%,var(--line,#3a4a5b));background:color-mix(in srgb,var(--wine,#8b1e3f) 54%,var(--panel,#182431))}
.commerce-demo__nav button.is-current{border-color:var(--rose,#d998ae);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rose,#d998ae) 28%,transparent)}
.commerce-demo__scenario{border:1px solid color-mix(in srgb,var(--line,#3a4a5b) 86%,transparent);border-radius:1rem;padding:.72rem 1rem}
.commerce-demo select{border-radius:.65rem;min-height:2.25rem;padding:.35rem .55rem}
.commerce-demo__card,.commerce-demo__paper,.commerce-demo__admin-grid section,.commerce-demo__row,.commerce-demo details{border:1px solid var(--line,#3a4a5b);border-radius:1.25rem;box-shadow:0 14px 36px rgba(1,7,14,.22)}
.commerce-demo__card{min-height:21rem;transform:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.commerce-demo__card:nth-child(2){transform:none;margin-top:1.35rem}
.commerce-demo__card:is(:hover,:focus-within){border-color:var(--rose,#d998ae);box-shadow:0 20px 46px color-mix(in srgb,var(--wine,#8b1e3f) 28%,transparent);transform:translateY(-3px)}
.commerce-demo__card.is-selected{border-color:var(--rose,#d998ae);box-shadow:0 0 0 2px color-mix(in srgb,var(--rose,#d998ae) 35%,transparent),0 20px 46px rgba(1,7,14,.3)}
.commerce-demo__split> :first-child{margin-top:1.5rem}.commerce-demo__split> :last-child{border-top:1px solid var(--line,#3a4a5b);overflow:hidden;position:relative}.commerce-demo__split> :last-child::after{background:linear-gradient(90deg,var(--wine,#8b1e3f),var(--rose,#d998ae),transparent);content:"";height:3.8rem;opacity:.78;pointer-events:none;position:absolute;right:-12%;top:-2.65rem;transform:rotate(-4deg);width:126%}.commerce-demo__split> :last-child>*{position:relative;z-index:1}
.commerce-demo__button{border-radius:.78rem;box-shadow:0 5px 14px rgba(1,7,14,.2);min-height:2.75rem;padding:.72rem 1rem;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.commerce-demo__button:is(:hover,:focus-visible){box-shadow:0 10px 22px color-mix(in srgb,var(--wine,#8b1e3f) 35%,transparent);transform:translateY(-2px)}
.commerce-demo__button--quiet{box-shadow:none}.commerce-demo__button.is-selected{box-shadow:0 0 0 2px color-mix(in srgb,var(--rose,#d998ae) 42%,transparent),0 8px 20px rgba(1,7,14,.2)}
.commerce-demo__field input{border-radius:.72rem;border-width:1px;padding:.8rem 1rem}.commerce-demo__status{border:1px solid color-mix(in srgb,var(--rose,#d998ae) 42%,var(--line,#3a4a5b));border-left:4px solid var(--rose,#d998ae);border-radius:1rem;box-shadow:0 8px 24px rgba(1,7,14,.16)}
.commerce-demo__timeline b{border-radius:.7rem;transform:none}.commerce-demo__timeline li:hover b{transform:scale(1.05)}
@media (max-width:700px){.commerce-demo__nav{border-bottom:1px solid var(--line,#3a4a5b);border-right:0}.commerce-demo__card:nth-child(2){margin-top:0}.commerce-demo__split> :first-child{margin-top:0}}
/* Escala de interfaz: la oferta deja las acciones dentro del primer pliegue. */
.commerce-demo__main{padding-top:clamp(1.25rem,3vw,2.5rem)}
.commerce-demo__scenario{margin-bottom:.65rem;padding:.55rem .85rem}
.commerce-demo__progress{margin-bottom:clamp(1.35rem,2.5vw,2rem);padding:.7rem 0}
.commerce-demo h1{font-size:clamp(2.25rem,4.5vw,3.625rem);line-height:1.02;margin:.1rem 0 .8rem;max-width:16ch}
.commerce-demo__lead{font-size:clamp(1.03rem,1.45vw,1.2rem);line-height:1.5}
.commerce-demo__plans{margin:1.5rem 0 2rem}
@media (max-width:700px){.commerce-demo__main{padding-top:1rem}.commerce-demo__scenario{font-size:.68rem}.commerce-demo__progress{margin-bottom:1.25rem}.commerce-demo h1{font-size:clamp(2.2rem,9.5vw,2.4rem);line-height:1.04}.commerce-demo__plans{margin-top:1.25rem}}