.sequence-page{min-height:100vh;background:linear-gradient(180deg,#173f38 0 250px,var(--cream) 250px)}
.sequence-page .shell{max-width:900px}.sequence-page .challenge-head{color:#fff}.sequence-page .instruction{color:#e1eee9}
.sequence-status{display:flex;justify-content:space-between;gap:12px;margin:18px 0 13px;padding:13px 16px;border-radius:18px;background:#fff;box-shadow:0 10px 30px #173d3020}.sequence-status span{color:#65756f;font-size:.88rem;text-align:right}
.sequence-slots{display:grid;gap:10px}.sequence-slot{position:relative;display:grid;grid-template-columns:42px 150px 1fr;align-items:center;gap:12px;width:100%;min-height:102px;padding:9px 13px;border:3px dashed #c8d8cf;border-radius:20px;background:#fffdf8;color:var(--ink);text-align:left;cursor:pointer;transition:.2s}.sequence-slot>i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e7f2eb;color:#194b42;font-style:normal;font-weight:950}.sequence-slot .sequence-picture{height:82px}.sequence-slot span:last-child{display:grid;gap:4px}.sequence-slot small{color:#65756f;line-height:1.3}.sequence-slot.filled{border-style:solid;border-color:#f2ce72}.sequence-slot.correct{border-color:#4da568;background:#effbef}.sequence-slot.correct>i{background:#4da568;color:white}.sequence-slot.wrong{border-color:#e46f62;animation:sequenceShake .35s}.sequence-slot.wrong>i{background:#e46f62;color:white}
.sequence-picture{display:block;width:100%;overflow:hidden;border-radius:13px;background-image:url('assets/secuencia-uncion-v1.webp');background-size:500% 100%;background-position:calc(var(--scene)*25%) center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ffffff80}
.sequence-album{margin-top:20px;padding:18px;border-radius:24px;background:#fff;box-shadow:0 16px 45px #173d3020}.sequence-album>div:first-child{display:flex;align-items:end;justify-content:space-between}.sequence-album h2{margin:0;font-size:1.25rem}.sequence-deck{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}.sequence-card{min-width:0;padding:7px;border:3px solid transparent;border-radius:17px;background:#f7f2e7;color:var(--ink);text-align:left;cursor:grab}.sequence-card .sequence-picture{aspect-ratio:1.46}.sequence-card strong,.sequence-card small{display:block}.sequence-card strong{margin:7px 3px 3px;font-size:.82rem}.sequence-card small{margin:0 3px 4px;color:#687871;font-size:.68rem;line-height:1.25}.sequence-card.selected{border-color:#f6bd4c;background:#fff3c9;transform:translateY(-3px)}.deck-empty{grid-column:1/-1;margin:5px;text-align:center;color:#65756f}.sequence-check{display:block;width:min(420px,100%);margin:18px auto 0}.sequence-check:disabled{opacity:.45;cursor:not-allowed}
@keyframes sequenceShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:620px){.sequence-page{background:linear-gradient(180deg,#173f38 0 220px,var(--cream) 220px)}.sequence-page .shell{padding-inline:10px}.sequence-page .challenge-head h1{font-size:1.75rem}.sequence-page .instruction{font-size:.88rem}.sequence-status{display:grid}.sequence-status span{text-align:left}.sequence-slot{grid-template-columns:34px 92px 1fr;gap:8px;min-height:83px;padding:7px}.sequence-slot>i{width:31px;height:31px}.sequence-slot .sequence-picture{height:64px}.sequence-slot strong{font-size:.78rem}.sequence-slot small{font-size:.67rem}.sequence-album{padding:13px}.sequence-deck{grid-template-columns:1fr 1fr;gap:8px}.sequence-card small{display:none}.sequence-card strong{font-size:.74rem}}
.sequence-slot.drag-over{border-color:#4da568;background:#effbef;transform:scale(1.015)}.drag-ghost{position:fixed!important;z-index:2000;width:155px!important;margin:0!important;pointer-events:none!important;opacity:.9;transform:translate3d(-999px,-999px,0);box-shadow:0 18px 50px #0005;rotate:-3deg}.sequence-loading{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 34%,#fff4c9,transparent 30%),#173f38;color:#fff;text-align:center}.sequence-loading>div{display:grid;justify-items:center;gap:10px}.sequence-loading span{font-size:5rem;animation:albumFloat .6s ease-in-out infinite alternate}.sequence-loading strong{font-size:clamp(1.4rem,5vw,2rem)}.sequence-loading small{color:#dcefe8}.sequence-loading i{width:150px;height:9px;margin-top:8px;overflow:hidden;border-radius:99px;background:#ffffff2e}.sequence-loading i:after{content:"";display:block;width:55%;height:100%;border-radius:inherit;background:#f6bd4c;animation:albumLoad .65s ease-in-out infinite alternate}@keyframes albumFloat{to{transform:translateY(-9px) rotate(3deg)}}@keyframes albumLoad{to{transform:translateX(82%)}}
.sequence-card{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.sequence-card.lifting{border-color:#f6bd4c;background:#fff3c9;transform:scale(.97)}.drag-ghost{touch-action:none;will-change:transform;transition:none!important}
.drag-ghost{left:0!important;top:0!important;width:165px!important;border:4px solid #f6bd4c!important;background:#fff8d9!important;opacity:.97!important;box-shadow:0 22px 55px #0008!important;filter:saturate(1.12);scale:1.05}.drag-ghost:after{content:"Moviendo…";position:absolute;left:50%;bottom:-15px;translate:-50% 0;padding:5px 10px;border-radius:99px;background:#173f38;color:white;font-size:.68rem;font-weight:950;white-space:nowrap}.remove-sequence-scene{position:absolute;z-index:8;right:7px;top:7px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:3px solid #fff;border-radius:50%;background:#d9554b;color:white;font-size:1.45rem;font-weight:950;line-height:1;box-shadow:0 5px 12px #0004;cursor:pointer}.sequence-slot.correct .remove-sequence-scene{display:none}

/* Caminito infantil descendente: cada parada queda más abajo que la anterior. */
.sequence-slots{position:relative;display:flex;flex-direction:column;gap:28px;padding:9px 3px 5px}
.sequence-slot{grid-template-columns:34px 1fr;gap:7px;width:72%;min-height:120px;padding:8px;border-radius:22px;box-shadow:0 8px 20px #173d3014}
.sequence-slot:nth-child(odd){align-self:flex-start}.sequence-slot:nth-child(even){align-self:flex-end}
.sequence-slot:not(:last-child):after{content:"↓";position:absolute;z-index:4;bottom:-32px;color:#e7a72f;font-size:1.9rem;font-weight:950;filter:drop-shadow(0 2px 0 #fff)}
.sequence-slot:nth-child(odd):after{right:12%}.sequence-slot:nth-child(even):after{left:12%}
.sequence-slot .sequence-picture{grid-column:1/-1;grid-row:1;height:82px}.sequence-slot>i{position:absolute;z-index:5;left:-7px;top:-7px;width:34px;height:34px;border:3px solid #fff;background:#f6bd4c;color:#173f38;box-shadow:0 4px 10px #0003}.sequence-slot>span:last-child{grid-column:1/-1}.sequence-slot strong{font-size:.76rem;line-height:1.15}.sequence-slot small{font-size:.62rem}.sequence-slot .empty-copy{align-self:center;text-align:center}.sequence-slot .empty-copy small{display:block;margin-top:3px}.remove-sequence-scene{right:-7px;top:-7px;width:31px;height:31px;font-size:1.25rem}
@media(max-width:620px){.sequence-slots{gap:26px}.sequence-slot{grid-template-columns:1fr;width:76%;min-height:108px;padding:7px}.sequence-slot .sequence-picture{height:66px}.sequence-slot strong{font-size:.7rem}.sequence-slot small{font-size:.58rem}}

/* Tablero final: espacios a la izquierda y álbum mezclado a la derecha. */
.sequence-page .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:820px}
.sequence-page .challenge-head,.sequence-page>.shell>.instruction,.sequence-status,.sequence-check{grid-column:1/-1}
.sequence-slots{grid-column:1;display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:9px;padding:0}
.sequence-slot,.sequence-slot:nth-child(n){align-self:stretch;grid-column:auto;grid-row:auto;width:100%;min-height:104px;padding:6px}
.sequence-slot:not(:last-child):after{display:none}
.sequence-album{grid-column:2;margin:0;padding:10px;border-radius:20px}
.sequence-album>div:first-child{display:block}.sequence-album .eyebrow{margin-bottom:2px}.sequence-album h2{font-size:1rem}
.sequence-deck{grid-template-columns:1fr;gap:9px;margin-top:8px}
.sequence-card{display:grid;grid-template-columns:1fr;padding:6px}.sequence-card .sequence-picture,.sequence-slot .sequence-picture{width:100%;height:auto;aspect-ratio:1.46;background-size:500% 100%}
.sequence-slot>span:last-child{padding-inline:3px}.sequence-slot strong,.sequence-card strong{white-space:normal}.sequence-slot small,.sequence-card small{line-height:1.15}
.sequence-check{margin-top:4px}
@media(max-width:620px){.sequence-page .shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.sequence-slots{gap:7px}.sequence-slot,.sequence-slot:nth-child(n){width:100%;min-height:91px;padding:5px;border-radius:16px}.sequence-slot .sequence-picture,.sequence-card .sequence-picture{height:auto;aspect-ratio:1.46}.sequence-slot>i{left:-4px;top:-4px;width:29px;height:29px;font-size:.78rem}.sequence-slot strong,.sequence-card strong{margin:4px 2px 1px;font-size:.61rem}.sequence-slot small,.sequence-card small{display:none}.sequence-album{padding:7px;border-radius:17px}.sequence-album .eyebrow{font-size:.56rem}.sequence-album h2{font-size:.78rem}.sequence-deck{gap:7px}.sequence-card{padding:5px;border-radius:14px}.remove-sequence-scene{right:-4px;top:-4px;width:28px;height:28px}.sequence-status{margin-bottom:6px}.sequence-status span{font-size:.72rem}}