:root{--deck-tick:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 12.6 10.2 17.4 18.6 7.2'/%3E%3C/svg%3E")}
/* Deck: a stack of illustrative screens whose checks reveal one by one (landing tabs),
   plus a static variant used as chapter figures on the details page. */
.deck{width:100%;min-width:0;color:var(--nd-ink)}
.deck-frame{display:grid;position:relative}
.deck-card{grid-area:1/1;display:flex;flex-direction:column;min-width:0;color:var(--nd-ink);background:var(--nd-cream);border:1px solid var(--border);box-shadow:0 18px 40px #0000002e;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.deck-card.is-active{opacity:1;visibility:visible;transition:opacity .3s ease;animation:deck-enter .35s ease-out both}
.deck-card.is-done{box-shadow:0 18px 40px #0000002e,inset 0 -3px var(--lime)}
.deck-card.is-static{opacity:1;visibility:visible;animation:none;box-shadow:none;transition:none}
@keyframes deck-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.deck-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 16px;border-bottom:1px solid var(--border);background:#f9f6ef;font:500 12px/1.4 var(--nd-mono);color:#796c58}
.deck-bar>span:last-child{color:#a2957f;white-space:nowrap}
.deck-card.is-done .deck-bar>span:last-child{color:var(--green)}

.deck-screen{flex:1;display:grid;align-content:start;gap:10px;padding:16px;min-height:264px;background:var(--sand);font-size:13px;line-height:1.35}
.deck-screen img{max-width:100%}
.ds-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--nd-cream);border:1px solid var(--border);font:500 11px/1.4 var(--nd-mono)}
.ds-nav b{white-space:nowrap}
.ds-nav span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nd-muted);font-weight:400}
.ds-hero{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:14px;align-items:center;padding:14px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-hero strong{display:block;font-size:19px;line-height:1.08;letter-spacing:-.02em;color:#384a32}
.ds-hero small{display:block;margin-top:7px;font-size:12px;color:var(--nd-muted)}
.ds-product{display:grid;gap:5px;font-size:11px;line-height:1.3}
.ds-product img{width:96px;height:80px;object-fit:cover}
.ds-product b{font-weight:600}
.ds-rows{display:grid;gap:6px}
.ds-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:9px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-row b{font-weight:600}
.ds-row .ds-sku{font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-row .ds-price{font:500 12px var(--nd-mono)}
.ds-chips{display:flex;flex-wrap:wrap;gap:4px;grid-column:1/-1}
.ds-chip{display:inline-block;font:11px/1.4 var(--nd-mono);padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:#fff;white-space:nowrap}
.ds-chip.is-on{background:var(--lime);border-color:var(--lime);color:var(--nd-ink)}
.ds-steps{display:flex;align-items:center;gap:6px}
.ds-steps span{flex:1;text-align:center;padding:10px 6px;background:var(--nd-cream);border:1px solid var(--border);font-weight:500;font-size:12px}
.ds-steps span.is-on{background:var(--forest);color:var(--nd-cream);border-color:var(--forest)}
.ds-steps i{font-style:normal;color:var(--nd-muted)}
.ds-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-line span:first-child{font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-status{font:500 11px/1.4 var(--nd-mono);color:var(--green);padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--green) 12%,transparent);white-space:nowrap}
.ds-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ds-tile{display:grid;align-content:start;gap:7px;padding:12px 11px;background:var(--nd-cream);border:1px solid var(--border);min-width:0}
.ds-tile b{font-size:13px;line-height:1.2;font-weight:600}
.ds-tile span{font:11px/1.35 var(--nd-mono);color:var(--green)}
.ds-tile img{width:22px;height:22px;object-fit:contain}
.ds-icons{display:flex;gap:5px}
.ds-icons img{width:22px;height:22px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:50%;padding:3px;box-sizing:border-box}
.ds-promo{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;padding:12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-promo img{width:88px;height:88px;object-fit:cover}
.ds-promo strong{display:block;font-size:19px;line-height:1.08;letter-spacing:-.02em}
.ds-promo .ds-chip{margin-top:9px}
.ds-meta{font:11px/1.4 var(--nd-mono);color:var(--nd-muted)}
.ds-care{display:grid;gap:6px}
.ds-care div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ds-strip img{width:100%;aspect-ratio:1;object-fit:cover}
.ds-strip img:nth-child(1){object-position:18% 50%}
.ds-strip img:nth-child(2){object-position:50% 50%}
.ds-strip img:nth-child(3){object-position:82% 50%}
.ds-video{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--forest);color:var(--nd-cream);font:11px var(--nd-mono)}
.ds-video::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--lime);margin-bottom:6px}
.ds-video span{position:absolute;right:6px;bottom:5px}
.ds-report{display:grid;gap:8px}
.ds-report div{padding:10px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-report b{display:block;font:500 11px/1.4 var(--nd-mono);color:var(--green);margin-bottom:3px}
.ds-inbox{display:grid;gap:6px}
.ds-inbox>div{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-inbox>div>div{min-width:0}
.ds-inbox b{display:block;font-weight:600}
.ds-inbox small{display:block;font-size:12px;color:var(--nd-muted)}
.ds-avatar{width:30px;height:30px;border-radius:50%;background:var(--forest);color:var(--lime);display:grid;place-items:center;font:500 11px var(--nd-mono)}
.ds-kit{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}
.ds-kit>div{display:grid;align-content:start;gap:8px;padding:10px;background:var(--nd-cream);border:1px solid var(--border);min-width:0}
.ds-kit img{width:100%;aspect-ratio:1;object-fit:cover}
.ds-kit .ds-bubble{padding:8px 10px;background:#e7f4e3;border-radius:12px 12px 12px 3px;font-size:12px;line-height:1.35}
.ds-kit .ds-flyer{aspect-ratio:3/4;display:grid;align-content:end;padding:8px;background:var(--forest);color:var(--nd-cream);font-size:12px;line-height:1.2;letter-spacing:-.01em}
.ds-kit .ds-flyer b{font-size:16px;display:block;margin-bottom:4px}
.ds-ad{display:grid;gap:6px;padding:12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-ad small{font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-ad strong{font-size:16px;line-height:1.2}
.ds-ad em{font-style:normal;color:var(--green);font-size:12px}
.ds-discs{display:flex;flex-wrap:wrap;gap:8px}
.ds-discs span{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--border);display:grid;place-items:center}
.ds-discs img{width:22px;height:22px;object-fit:contain}
.ds-shop{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-shop img{width:28px;height:28px;border-radius:6px}
.ds-chat{display:grid;gap:8px}
.ds-msg{max-width:88%;padding:10px 12px;background:var(--nd-cream);border:1px solid var(--border);border-radius:12px 12px 12px 3px;font-size:13px;line-height:1.4}
.ds-msg.is-us{justify-self:end;background:var(--forest);color:var(--nd-cream);border-color:var(--forest);border-radius:12px 12px 3px 12px}
.ds-reply{font:500 11px/1.4 var(--nd-mono);color:var(--green)}

/* Mock: una homepage con su estructura, no solo un hero. */
.ds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ds-cell{display:grid;gap:5px;padding:8px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-thumb{height:34px;background:linear-gradient(135deg,#e7e1d4,#d9d2c2)}
.ds-ln{height:6px;border-radius:2px;background:#e4ded1}
.ds-ln.is-short{width:55%}
.ds-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ds-foot span{height:5px;border-radius:2px;background:#e0d9ca}
.deck-card.is-playing .ds-site>*{animation:ds-rise .42s ease both;animation-delay:calc(var(--d,0) * 130ms)}
@keyframes ds-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Mock: el panel de analítica, con la curva dibujándose. */
.ds-panel{display:grid;gap:9px;padding:12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-panel-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-panel-top b{font:600 17px/1 var(--nd-sans,inherit);color:var(--nd-ink)}
.ds-chart{display:block;width:100%;height:120px}
.ds-chart .ds-area{fill:color-mix(in srgb,var(--green) 13%,transparent)}
.ds-chart .ds-trace{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.deck-card.is-playing .ds-trace{stroke-dasharray:1;stroke-dashoffset:1;animation:ds-draw 1.15s cubic-bezier(.4,0,.2,1) .25s both}
.deck-card.is-playing .ds-area{animation:ds-wash .5s ease .9s both}
@keyframes ds-draw{to{stroke-dashoffset:0}}
@keyframes ds-wash{from{opacity:0}to{opacity:1}}
.ds-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ds-metric{display:grid;gap:2px;padding:9px 10px;background:var(--nd-cream);border:1px solid var(--border);min-width:0}
.ds-metric span{font:10px var(--nd-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--nd-muted)}
.ds-metric b{font-size:15px;font-weight:600;line-height:1.1}
.ds-metric i{font:500 11px var(--nd-mono);font-style:normal;color:var(--green)}

/* Mock: el buscador de siempre — la tienda indexada en Google. */
.ds-search{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#fff;border:1px solid var(--border);border-radius:999px}
.ds-search img{width:16px;height:16px;flex:none}
.ds-query{font:13px/1.2 var(--nd-mono);color:var(--nd-ink);white-space:nowrap;overflow:hidden;border-right:2px solid var(--green)}
.deck-card.is-playing .ds-query{animation:ds-type 1.1s steps(19) .25s both}
@keyframes ds-type{from{width:0}to{width:19ch}}
.ds-result{display:grid;gap:4px;padding:11px 13px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-result-url{display:flex;align-items:center;gap:7px;font:11px var(--nd-mono);color:var(--nd-muted);min-width:0}
.ds-favicon{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--forest);color:var(--lime);font:600 8px/1 var(--nd-mono)}
.ds-result h4{margin:0;font-size:14px;font-weight:500;line-height:1.25;color:#1a41b8}
.ds-result p{margin:0;font-size:11.5px;line-height:1.45;color:var(--nd-muted)}
.deck-card.is-playing .ds-result{animation:ds-rise .42s ease 1.25s both}
.deck-card.is-playing .ds-result.is-second{animation-delay:1.45s}
.ds-chanrow{display:flex;flex-wrap:wrap;gap:6px}
.ds-chan{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--nd-cream);border:1px solid var(--border);border-radius:999px;font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-chan img{width:15px;height:15px;object-fit:contain}
.deck-card.is-playing .ds-chan{animation:ds-rise .38s ease both;animation-delay:calc(1.5s + var(--d,0) * 120ms)}

/* Mock: tarifas de envío reales, con las paqueterías que Shopify cotiza. */
.ds-ship{display:grid;gap:8px;padding:11px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-ship-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font:11px var(--nd-mono);color:var(--nd-muted)}

/* Mock: el checkout, hasta el botón de pagar. */
.ds-pay-card{display:grid;gap:7px;padding:11px 12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-pay-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px}
.ds-pay-row>span{min-width:0;color:var(--nd-muted)}
.ds-pay-row>b{font:500 12px var(--nd-mono);color:var(--nd-ink);white-space:nowrap}
.ds-pay-row.is-total{padding-top:7px;border-top:1px solid var(--border)}
.ds-pay-row.is-total>span{color:var(--nd-ink);font-weight:600}
.ds-pay-row.is-total>b{font-size:13px;font-weight:600}
.ds-field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--border);font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-dots{color:var(--nd-ink);letter-spacing:.09em}
.ds-paybtn{display:grid;place-items:center;padding:11px;border-radius:4px;background:var(--forest);color:var(--nd-cream);font-size:13px;font-weight:500}
.deck-card.is-playing .ds-paybtn{animation:ds-press .55s ease 1.25s both}
@keyframes ds-press{0%,100%{transform:none}45%{transform:scale(.975)}}

/* Mock: las búsquedas que ya traen gente, con su posición. */
.ds-queries{display:grid;gap:8px}
.ds-q{display:grid;grid-template-columns:minmax(0,1fr) 84px auto;gap:10px;align-items:center;font-size:12px}
.ds-q>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-qbar{display:block;height:7px;border-radius:3px;background:#e7e1d4;overflow:hidden}
.ds-qbar>i{display:block;height:100%;width:var(--w,50%);border-radius:3px;background:var(--green);transform-origin:left}
.deck-card.is-playing .ds-qbar>i{animation:ds-grow .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(350ms + var(--d,0) * 130ms)}
@keyframes ds-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ds-q>b{font:500 11px var(--nd-mono);color:var(--nd-muted);white-space:nowrap}

/* Mock: la revisión mensual corriendo punto por punto. */
.ds-run{display:grid;gap:10px;padding:12px;background:var(--nd-cream);border:1px solid var(--border)}
.ds-run-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:11px var(--nd-mono);color:var(--nd-muted)}
.ds-run-top b{font-size:15px;font-weight:600;color:var(--nd-ink)}
.ds-track{height:8px;border-radius:4px;background:#e7e1d4;overflow:hidden}
.ds-track>i{display:block;height:100%;width:100%;border-radius:4px;background:var(--green);transform-origin:left}
.deck-card.is-playing .ds-track>i{animation:ds-run-fill 1.5s cubic-bezier(.3,.7,.3,1) .3s both}
@keyframes ds-run-fill{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
.ds-run-note{font:11px var(--nd-mono);color:var(--green)}

.deck-checks{list-style:none;margin:0;padding:16px 18px 18px;display:grid;gap:12px;font-size:16px;line-height:1.4;background:var(--forest);color:var(--nd-cream)}
.deck-checks li{position:relative;padding-left:38px;min-height:26px;color:var(--nd-cream)}
.deck-checks li::before{content:'';position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--lime)}
.deck-checks li::after{content:'';position:absolute;left:0;top:0;width:26px;height:26px;background:var(--forest);-webkit-mask:var(--deck-tick) center/contain no-repeat;mask:var(--deck-tick) center/contain no-repeat}
.deck-card.is-playing .deck-checks li{animation:deck-check-text .45s ease both;animation-delay:calc(700ms + var(--i,0) * 600ms)}
.deck-card.is-playing .deck-checks li::before{animation:deck-check .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(700ms + var(--i,0) * 600ms)}
.deck-card.is-playing .deck-checks li::after{animation:deck-check-draw .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(840ms + var(--i,0) * 600ms)}
@keyframes deck-check{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes deck-check-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes deck-check-text{from{color:var(--nd-on-dark-muted)}to{color:var(--nd-cream)}}

.deck-controls{display:none;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
[data-deck][data-ready] .deck-controls{display:flex}
.deck-pickers{display:flex;flex-wrap:wrap;gap:6px}
.deck-pickers button{width:44px;height:44px;padding:0;border:1px solid var(--nd-line-w);border-radius:50%;background:transparent;color:var(--nd-cream);font:12px var(--nd-mono);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.deck-pickers button:hover{border-color:var(--lime)}
.deck-pickers button[aria-pressed="true"]{background:var(--lime);color:var(--nd-ink);border-color:var(--lime)}
.deck-motion{min-height:44px;padding:8px 16px;border:1px solid var(--nd-line-w);border-radius:30px;background:transparent;color:var(--nd-cream);font-size:14px;cursor:pointer;transition:border-color .2s}
.deck-motion:hover{border-color:var(--lime)}
.deck :focus-visible{outline-color:var(--lime)}
.deck>.example-caption{margin-top:12px;padding:0;font-size:12px;line-height:1.5;color:var(--nd-on-dark-muted);background:none}

@media(max-width:950px){.deck-screen{padding:14px}}
@media(max-width:700px){
  .deck-screen{min-height:236px;gap:8px}
  .deck-checks{font-size:15px;gap:10px;padding:14px 15px 16px}
  .deck-checks li{padding-left:34px;min-height:24px}
  .deck-checks li::before,.deck-checks li::after{width:24px;height:24px}
  .ds-hero{grid-template-columns:minmax(0,1fr) 80px}
  .ds-product img{width:80px;height:68px}
  .ds-hero strong,.ds-promo strong{font-size:17px}
  .deck-controls{gap:10px}
}
@media(max-width:390px){
  .deck-bar{font-size:11px;padding-inline:12px}
  .deck-screen{padding:12px}
  .ds-tiles{gap:6px}
  .ds-tile{padding:10px 8px}
  .ds-tile b{font-size:12px}
  .ds-kit{grid-template-columns:1.2fr 1fr 1fr;gap:6px}
  .deck-pickers{gap:4px}
  .deck-pickers button{width:40px;height:40px}
  .deck-motion{padding-inline:12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .deck-card,.deck-card.is-active{animation:none;transition:none}
  .deck-checks li,.deck-checks li::before,.deck-checks li::after{animation:none}
  .ds-site>*,.ds-trace,.ds-area,.ds-query,.ds-result,.ds-chan,.ds-paybtn,.ds-qbar>i,.ds-track>i{animation:none!important}
  .ds-query{width:auto;border-right:0}
}
@media print{
  .deck-checks{background:none;color:var(--nd-ink)}
  .deck-checks li{color:var(--nd-ink)}
  .deck-checks li::before{background:var(--forest)}
  .deck-checks li::after{background:#fff}
  .deck-card{opacity:1;visibility:visible;position:static;box-shadow:none;break-inside:avoid}
  .deck-frame{display:block}
  .deck-controls{display:none!important}
}