:root{--ink:#1F1B16;--paper:#FBF6EA;--accent:#C8412E;--accent-soft:#FCE7E2;--muted:#4D4538;--sun:#F2C94C;--sky:#CFE0F2;--rose:#F4B8AE;--mint:#CDE8D5;--gut:clamp(16px,4vw,28px);--hb:225px 16px 240px 18px/18px 230px 16px 250px;--hb2:18px 240px 16px 225px/230px 16px 250px 18px;--hbtn:120px 12px 110px 12px/12px 110px 12px 120px;--hc:60px 40px 56px 44px/40px 54px 44px 58px;--hs:16px 10px 15px 11px/11px 16px 10px 15px}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--ink)}a:hover{color:#B23A28}
.hand{font-family:'Patrick Hand',cursive;font-weight:400}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.dots{background-image:radial-gradient(rgba(31,27,22,.13) 1.3px,transparent 1.7px);background-size:11px 11px}
.dots-light{background-image:radial-gradient(rgba(255,255,255,.22) 1.3px,transparent 1.7px);background-size:11px 11px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cuaderno de Dani: sombra rayada y dibujos como sticker ---------- */
.sombra{position:relative;display:flex}
.sombra>*{flex:1;min-width:0}
.sombra:nth-child(2n){--hb:var(--hb2)}
.sombra::before{content:"";position:absolute;inset:8px -8px -8px 8px;border-radius:var(--hb);background:repeating-linear-gradient(135deg,rgba(31,27,22,.62) 0 1.5px,transparent 1.5px 4.5px);transition:transform .25s ease}
.grid>.sombra:hover::before,.ideas-grid>.sombra:hover::before{transform:translate(3px,4px)}
.art>svg{position:relative;z-index:1}
.stk{position:absolute;inset:0;pointer-events:none}
.stk svg{display:block;filter:drop-shadow(1.5px 2.5px 0 rgba(31,27,22,.38))}
.stk svg *{stroke:#fff!important;fill:#fff!important;stroke-width:13px!important}
.sombra:nth-child(odd) .art{rotate:-3deg}.sombra:nth-child(even) .art{rotate:2deg}

/* ---------- Botones ---------- */
.btn{box-shadow:4px 4px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease,background-color .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;font-weight:900;font-size:clamp(16px,1.6vw,18px);line-height:1.2;text-align:center;border:3px solid var(--ink);border-radius:var(--hbtn);padding:12px 24px;cursor:pointer;font-family:inherit}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible,.chip:focus-visible,.idea:focus-visible,.field:focus-visible,nav a:focus-visible{outline:3px solid #2F64A8;outline-offset:3px}
.btn-red{background:var(--accent);color:#fff}.btn-red:hover{color:#fff;background:#B23A28}
.btn-white{background:#fff;color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{color:#fff}
.btn-sun{background:var(--sun);color:var(--ink)}
.pill{background:#fff;border:2px solid var(--ink);border-radius:var(--hc);padding:6px 14px;font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.chip{flex:none;min-height:44px;padding:8px 18px;border:2.5px solid var(--ink);border-radius:var(--hc);font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;background:#fff;color:var(--ink);transition:transform .15s ease,background-color .2s ease,color .2s ease}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip.cprice{border-style:dashed;border-radius:var(--hs)}
.chip.cprice[aria-pressed="true"]{background:var(--accent)}
.chip.cstore{border-style:dotted;border-radius:var(--hs)}
.chip.cstore[aria-pressed="true"]{background:#2F4A6B}
.scrollx{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollx::-webkit-scrollbar{display:none}

/* ---------- Encabezado ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(251,246,234,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;padding-top:10px;padding-bottom:10px}
.logo{text-decoration:none;display:flex;align-items:center;gap:10px;min-width:0}
.logo-mark{width:42px;height:42px;border:3px solid var(--ink);border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:2px 2px 0 var(--ink)}
.logo-txt{font-size:clamp(22px,3vw,28px);line-height:1;white-space:nowrap}
nav{display:flex;gap:2px}
nav a{text-decoration:none;font-weight:800;font-size:15px;padding:10px 12px;border-radius:10px;white-space:nowrap}
nav a:hover{background:#fff}
.head-cta{flex:none;min-height:44px;font-size:15px;padding:8px 16px;white-space:nowrap}
.progress{position:absolute;left:0;bottom:-3px;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:1040px){nav{display:none}}
@media (max-width:420px){.head-cta{padding:8px 12px;font-size:14px}.logo-mark{width:34px;height:34px}.logo-txt{font-size:20px}}

/* ---------- Portada ---------- */
.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--ink)}
.hero-in{position:relative;display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,64px);align-items:center;padding-top:clamp(36px,6vw,80px);padding-bottom:clamp(64px,8vw,110px)}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px;position:relative;z-index:2}
.bubble{position:relative;align-self:flex-start;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:8px 18px;font-size:clamp(19px,2.2vw,23px);transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.bubble::after{content:"";position:absolute;left:28px;bottom:-15px;width:18px;height:18px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewX(30deg) rotate(45deg)}
h1{margin:0;font-size:clamp(46px,7.6vw,96px);line-height:.96;letter-spacing:-.01em;text-wrap:balance}
.hl{background:var(--accent);color:#fff;padding:0 14px;border:3px solid var(--ink);border-radius:12px;display:inline-block;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--ink)}
.lead{margin:0;font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--muted);max-width:34em}
.row{display:flex;flex-wrap:wrap;gap:10px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}.ctas .btn{flex:1 1 200px;max-width:300px}
.panels{flex:1 1 380px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,18px);position:relative;z-index:1}
.hp{will-change:transform}
.panel{position:relative;aspect-ratio:1;border:3px solid var(--ink);border-radius:var(--hb);display:flex;align-items:center;justify-content:center;transform:rotate(var(--r,0deg))}
.hp::before{transform:rotate(var(--r,0deg))}
.panel .art{width:78%;margin-top:0}.panel .art svg{width:100%;height:auto}
.tag{position:absolute;border:3px solid var(--ink);border-radius:14px;padding:2px 10px;font-size:clamp(17px,2vw,21px);box-shadow:2px 2px 0 var(--ink)}
.deco{position:absolute;pointer-events:none;z-index:0}
@media (max-width:860px){.px1{display:none}}
.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);z-index:2}

/* ---------- Cintas ---------- */
.ticker-band{background:var(--accent);border-bottom:3px solid var(--ink);overflow:hidden;padding:10px 0}
.ticker-band.alt{background:var(--sun)}
.ticker{display:flex;width:max-content;font-size:clamp(24px,3vw,30px);color:#fff;white-space:nowrap}.ticker span{padding-right:28px}
.alt .ticker{color:var(--ink)}

/* ---------- Secciones ---------- */
section.block{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);scroll-margin-top:70px}
section.block:not(.ideas){background-image:linear-gradient(rgba(47,100,168,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(47,100,168,.15) 1px,transparent 1px);background-size:26px 26px}
h2{margin:0;font-size:clamp(40px,5.6vw,64px);line-height:1;text-wrap:balance}
.sub{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.kicker{font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.stack{display:flex;flex-direction:column;gap:8px}

/* Cómo funciona: tira de 3 viñetas */
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(18px,3vw,28px);margin-top:28px}
.step{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--hb);overflow:hidden;display:flex;flex-direction:column}
.step .pic{height:92px;border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
.pic .art{margin-top:0}.pic .art svg{width:auto;height:100%}.step .pic .art{height:74px}
.step .txt{padding:11px 16px 13px;display:flex;flex-direction:column;gap:3px}
.step .txt .sub{font-size:15px;line-height:1.4}
.step h3{margin:0;font-size:19px;font-weight:900}
.step .n{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;z-index:1}
.howto>:nth-child(1){--r:-1.2deg}.howto>:nth-child(2){--r:.8deg}.howto>:nth-child(3){--r:-.6deg}
.howto>.sombra{transform:rotate(var(--r,0deg))}
#como{padding-block:clamp(34px,5vw,56px)}
@media (max-width:620px){.step{flex-direction:row}.step .pic{flex:0 0 96px;height:auto;border-bottom:0;border-right:3px solid var(--ink)}.step .pic .art{height:62px}.step .n{width:26px;height:26px;font-size:17px;top:6px;left:6px}}

/* Destacados: tira horizontal fijada */
.strip{position:relative;background:var(--ink);color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.strip-pin{padding:clamp(56px,8vw,96px) 0}
.strip-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.strip h2{color:#fff}
.strip .sub{color:#E2DACB}
.strip-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}.strip-scroll::-webkit-scrollbar{display:none}
.strip-track{display:flex;gap:clamp(18px,3vw,32px);width:max-content;padding:8px var(--gut) 18px}
.feat{scroll-snap-align:start;flex:none;width:min(84vw,540px);background:#fff;color:var(--ink);border:3px solid #fff;border-radius:var(--hb);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);box-shadow:6px 6px 0 var(--accent)}
.feat .art-box{position:relative;border-right:3px solid var(--ink);display:flex;align-items:center;justify-content:center;min-height:260px}
.feat .art{width:82%;margin-top:0}.feat .art svg{width:100%;height:auto}
.feat .info{padding:clamp(18px,2.5vw,26px);display:flex;flex-direction:column;gap:10px}
.feat h3{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.2;font-weight:900}
.feat p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.feat .big{font-size:clamp(34px,4vw,42px);line-height:1}
.feat .btn{margin-top:auto}
.feat .num{position:absolute;top:10px;left:10px;z-index:2;background:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:0 10px;font-size:20px}
.feat .num.drop{background:var(--accent);color:#fff}
.feat .prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.feat .old{font-weight:800;font-size:17px;color:var(--muted);text-decoration:line-through}
.feat-tabs{margin-bottom:18px}
.strip .chip[aria-pressed="true"]{background:var(--accent);border-color:#fff}
.feat-nav{display:flex;gap:10px}
.feat-nav button{width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);color:var(--ink);font-size:22px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 var(--accent);transition:transform .15s ease}
.feat-nav button:hover{transform:translateY(-2px)}
.feat-nav button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:620px){.feat{grid-template-columns:1fr}.feat .art-box{border-right:0;border-bottom:3px solid var(--ink);min-height:200px}.feat .art{width:60%}}

/* Colección */
.tools{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.field{min-height:48px;border:3px solid var(--ink);border-radius:var(--hs);background:#fff;font:inherit;font-weight:700;font-size:16px;color:var(--ink);padding:10px 14px}
.search{position:relative;flex:1 1 260px}
.search .field{width:100%;padding-left:44px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none}
select.field{flex:0 1 230px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F1B16' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
@media (max-width:560px){select.field{flex:1 1 100%}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(18px,2.5vw,26px)}
.card{position:relative;border:3px solid var(--ink);border-radius:var(--hb);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease}
.card:hover{transform:translate(-3px,-4px) rotate(-.4deg)}
.card-art{position:relative;height:210px;border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.art svg,.art-box svg{overflow:visible}.m{transform-box:view-box;transform-origin:var(--o,80px 70px)}
.art{position:relative;isolation:isolate;display:flex;margin-top:18px;transition:transform .35s ease}.card:hover .art{transform:scale(1.06) rotate(-2deg)}
.cat{position:absolute;top:10px;left:8px;z-index:1;background:#fff;border:2px solid var(--ink);border-radius:var(--hc);padding:2px 7px;font-size:11px;font-weight:900}
.price{position:absolute;top:10px;right:8px;z-index:2;background:var(--accent);color:#fff;border:3px solid var(--ink);border-radius:12px 14px 14px 12px;padding:2px 12px 2px 24px;font-size:30px;line-height:1.15;box-shadow:3px 3px 0 var(--ink);transform:rotate(3deg);transition:transform .25s ease,box-shadow .25s ease}
.price.range{font-size:25px;line-height:1.02;text-align:right;padding:4px 10px 4px 22px}
.price::before{content:"";position:absolute;left:7px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink)}
.price::after{content:"";position:absolute;left:8px;bottom:50%;width:22px;height:30px;margin-bottom:1px;border:2.5px solid var(--ink);border-color:transparent transparent transparent var(--ink);border-radius:50%;transform:rotate(14deg);transform-origin:0 100%}
.price small{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:11px;line-height:1.2}
.ribbon{position:absolute;bottom:10px;left:10px;z-index:1;background:var(--accent);color:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:2px 10px;font-size:18px;transform:rotate(-3deg)}
.burst{position:absolute;bottom:4px;right:6px;z-index:1;width:78px;height:78px;display:flex;align-items:center;justify-content:center;transform:rotate(-10deg)}
.burst svg{position:absolute;inset:0;width:100%;height:100%}
.burst b{position:relative;font-family:'Patrick Hand',cursive;font-weight:400;font-size:17px;line-height:.95;text-align:center}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{margin:0;font-size:19px;line-height:1.25;font-weight:900}
.store{align-self:flex-start;font-size:12px;font-weight:900;letter-spacing:.03em;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:var(--sun)}
.store.ali{background:var(--rose)}
.stars{align-self:flex-start;font-size:13px;font-weight:900;color:#8A5A00}
.card-body p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.buy{margin-top:auto;min-height:48px;font-size:16px;border-radius:var(--hbtn);padding:10px 14px;width:100%}
.buy svg{transition:transform .2s ease}
.card:focus-within .price{transform:rotate(-2deg) scale(1.1)}
@media (hover:hover){
.card:hover .price{box-shadow:5px 5px 0 var(--ink)}
.card:hover .buy{background:var(--accent)}
.card:hover .buy svg{transform:translate(3px,-3px)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.card:hover{transform:translate(-4px,-8px) rotate(-.8deg)}
.card:hover .price{animation:pricePop .55s cubic-bezier(.3,1.6,.5,1) both}
.card:hover .art{animation:artJump .7s ease both}
.card:hover .burst{animation:burstWiggle .6s ease both}
.card:hover .ribbon{transform:rotate(2deg) scale(1.08)}
.ribbon{transition:transform .25s ease}
@keyframes pricePop{0%{transform:rotate(3deg) scale(1)}45%{transform:rotate(-7deg) scale(1.28)}70%{transform:rotate(4deg) scale(1.1)}100%{transform:rotate(-3deg) scale(1.16)}}
@keyframes artJump{0%{transform:none}35%{transform:translateY(-14px) scale(1.1) rotate(-4deg)}65%{transform:translateY(2px) scale(1.04) rotate(3deg)}100%{transform:scale(1.08) rotate(-2deg)}}
@keyframes burstWiggle{0%,100%{transform:rotate(-10deg)}30%{transform:rotate(8deg) scale(1.12)}65%{transform:rotate(-16deg) scale(1.05)}}
}
.empty{border:3px dashed var(--ink);border-radius:var(--hb);padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;background:#fff;margin-bottom:22px}.empty[hidden]{display:none}

/* Ideas */
.ideas{background:var(--accent-soft);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ideas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px}
.idea{position:relative;text-decoration:none;border:3px solid var(--ink);border-radius:var(--hb);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease}
.idea:hover{transform:translate(-3px,-3px);color:var(--ink)}
.idea .pic{height:160px;border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
.idea .pic .art{height:86%}
.idea .txt{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.idea h3{margin:0;font-size:21px;font-weight:900}
.idea .go{margin-top:auto;padding-top:6px;font-weight:900}

/* Sobre Dani */
.about{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--hb);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:14px}
.about p{margin:0;font-size:clamp(17px,1.8vw,19px);line-height:1.7;color:#3D362D}
.sign{font-size:30px;color:var(--accent)}

/* Llamado final */
.final{position:relative;overflow:hidden;background:var(--accent);color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);text-align:center}
.final .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}
.final h2{color:#fff;font-size:clamp(46px,8vw,104px);line-height:.95}
.final p{margin:0;font-size:clamp(17px,1.8vw,20px);max-width:32em;line-height:1.6;color:#FFF3EE}

footer{background:var(--ink);color:#F3EDE0}
footer .wrap{padding-top:44px;padding-bottom:44px;display:flex;flex-direction:column;gap:14px}
footer p{margin:0;font-size:14px;line-height:1.65;max-width:760px;color:#E2DACB}

/* ---------- Movimiento ---------- */
/* Respaldo para navegadores sin animaciones ligadas al scroll: lo activa el script */
.io .rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.io .rv.in{opacity:1;transform:none}
.io .howto>.rv.in{transform:rotate(var(--r,0deg))}

@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.ticker{animation:tick 40s linear infinite}.alt .ticker{animation-direction:reverse;animation-duration:46s}@keyframes tick{to{transform:translateX(-50%)}}
.bob{animation:bob 4.5s ease-in-out infinite}.bob2{animation:bob 5.5s ease-in-out -1.5s infinite}@keyframes bob{50%{transform:translateY(-8px)}}
.cue svg{animation:nudge 1.6s ease-in-out infinite}@keyframes nudge{50%{transform:translateY(5px)}}
@supports (animation-timeline:view()){
.progress{animation:grow linear both;animation-timeline:scroll(root)}@keyframes grow{to{transform:scaleX(1)}}
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
@keyframes rv{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
.howto>.rv{animation-name:rvstep}.howto>:nth-child(2).rv{animation-range:entry 10% cover 32%}.howto>:nth-child(3).rv{animation-range:entry 20% cover 38%}
@keyframes rvstep{from{opacity:0;transform:translateY(60px) rotate(calc(var(--r) * -4))}to{opacity:1;transform:rotate(var(--r))}}
.pop{animation:pop linear both;animation-timeline:view();animation-range:entry 10% cover 34%}
@keyframes pop{from{opacity:0;transform:rotate(var(--r,0deg)) scale(.86)}to{opacity:1;transform:rotate(var(--r,0deg))}}
/* Portada: las viñetas se separan y el texto sube suave al bajar */
.hp{animation:var(--hp) linear both;animation-timeline:scroll(root);animation-range:0 85vh}
@keyframes hp1{to{transform:translate(-26px,-90px) rotate(-4deg)}}
@keyframes hp2{to{transform:translate(26px,-150px) rotate(4deg)}}
@keyframes hp3{to{transform:translate(-18px,-40px) rotate(-3deg)}}
@keyframes hp4{to{transform:translate(22px,-110px) rotate(3deg)}}
.hero-copy{animation:lift linear both;animation-timeline:scroll(root);animation-range:0 90vh}@keyframes lift{to{transform:translateY(-70px);opacity:.35}}
.px1{animation:px1 linear both;animation-timeline:scroll(root);animation-range:0 900px}@keyframes px1{to{transform:translateY(-160px) rotate(40deg)}}
.px2{animation:px2 linear both;animation-timeline:scroll(root);animation-range:0 900px}@keyframes px2{to{transform:translateY(-90px) translateX(-60px)}}
.px3{animation:px3 linear both;animation-timeline:scroll(root);animation-range:0 900px}@keyframes px3{to{transform:translateY(-220px) rotate(-20deg)}}
.px4{animation:px4 linear both;animation-timeline:scroll(root);animation-range:0 900px}@keyframes px4{to{transform:translateY(-120px) rotate(90deg)}}
.cue{animation:fade linear both;animation-timeline:scroll(root);animation-range:0 200px}@keyframes fade{to{opacity:0}}
.final .floaty{animation:floaty linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes floaty{from{transform:translateY(120px)}to{transform:translateY(-120px) rotate(30deg)}}
.final h2{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes zoom{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
}}

/* ---------- Movimiento propio de cada accesorio ---------- */
@media (prefers-reduced-motion:no-preference){
.card:hover .art.mov{animation:none}
.card:hover .mov .m,.feat:hover .mov .m,.mov.play .m{animation:var(--k) var(--t,1.1s) var(--e,ease-in-out) var(--d,0s) var(--c,1) both}
.m-sway{--k:sway}.m-swayr{--k:swayr}.m-hop{--k:hop;--t:.9s}.m-rise{--k:rise}.m-coin{--k:coin}.m-open{--k:open}.m-flap{--k:flap}.m-zip{--k:zip}
.m-pop{--k:pinpop;--t:.6s}.m-press{--k:press;--t:.8s}.m-stitch{--k:stitch;--e:linear}.m-spark{--k:spark;--t:.8s}.m-tilt{--k:tilt}.m-roam{--k:roam}
.m-umbr{--k:umbr}.m-shake{--k:shake;--t:.8s}.m-spin{--k:spin}.m-squish{--k:squish;--t:.8s}.m-lid{--k:lid}.m-fly{--k:fly}.m-prop{--k:prop;--t:.16s;--c:7;--e:linear}
@keyframes sway{0%,100%{transform:none}20%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}85%{transform:rotate(-2deg)}}
@keyframes swayr{0%,100%{transform:none}20%{transform:rotate(-9deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
@keyframes hop{0%,100%{transform:none}15%{transform:scale(1.06,.9)}42%{transform:translateY(-14px) scale(.97,1.05)}66%{transform:scale(1.05,.93)}84%{transform:translateY(-3px)}}
@keyframes rise{0%,100%{transform:none}32%,68%{transform:translateY(-20px) rotate(-5deg)}}
@keyframes coin{0%,100%{transform:none}38%{transform:translateY(-34px) scaleX(-1)}62%{transform:translateY(-34px) scaleX(1)}}
@keyframes open{0%,100%{transform:none}32%,66%{transform:scaleX(.16)}}
@keyframes flap{0%,100%{transform:none}32%,66%{transform:scaleY(.55)}}
@keyframes zip{0%,100%{transform:none}46%,58%{transform:translateX(68px)}}
@keyframes pinpop{0%,100%{transform:none}38%{transform:scale(1.2) rotate(-6deg)}68%{transform:scale(.95)}}
@keyframes press{0%,100%{transform:none}32%{transform:scale(.9)}64%{transform:scale(1.05)}}
@keyframes stitch{to{stroke-dashoffset:-48}}
@keyframes spark{0%,100%{transform:none}42%{transform:scale(1.7) rotate(45deg)}}
@keyframes tilt{0%,100%{transform:none}28%{transform:rotate(-9deg)}62%{transform:rotate(7deg)}}
@keyframes roam{0%,100%{transform:none}25%{transform:translate(-40px,10px)}50%{transform:translate(-24px,-18px)}75%{transform:translate(8px,6px)}}
@keyframes umbr{0%,100%{transform:none}30%{transform:scale(.24,.94)}62%{transform:scale(1.1,.96)}82%{transform:scale(.97,1)}}
@keyframes shake{0%,100%{transform:none}12%,36%,60%{transform:rotate(-6deg)}24%,48%,72%{transform:rotate(6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes squish{0%,100%{transform:none}30%{transform:scale(1.1,.84)}62%{transform:scale(.96,1.06)}}
@keyframes lid{0%,100%{transform:none}32%,66%{transform:rotate(-30deg)}}
@keyframes fly{0%,100%{transform:none}30%{transform:translate(-6px,-7px) rotate(-5deg)}66%{transform:translate(6px,-3px) rotate(4deg)}}
@keyframes prop{50%{transform:scaleY(.08)}}
.m-toss{--k:toss}.m-wobble{--k:wobble}.m-wave{--k:wave;--t:.5s;--c:2}.m-beat{--k:beat;--t:.55s;--c:2}.m-blink{--k:blink;--t:.5s}.m-steam{--k:steam;--t:1.2s;--e:ease-out}
.m-clinkl{--k:clinkl;--t:.8s}.m-clinkr{--k:clinkr;--t:.8s}.m-straw{--k:straw}.m-cap{--k:cap}.m-fanl{--k:fanl}.m-fanr{--k:fanr}.m-flip{--k:flipx}.m-flipy{--k:flipy}
.m-roll{--k:spin;--t:1.3s}.m-peel{--k:peel}.m-draw{--k:draw;--e:ease-out}.m-drop{--k:drop;--t:.65s;--e:cubic-bezier(.3,1.4,.5,1)}.m-drive{--k:drive}.m-carriage{--k:carriage}.m-snap{--k:snap}
.m-glow{--k:glow}.m-fall{--k:fall;--t:1.2s;--e:linear}.m-float{--k:float;--t:1.3s}.m-flame{--k:flame;--t:.3s;--c:4}.m-ripple{--k:ripple}.m-lidup{--k:lidup}
@keyframes toss{0%,100%{transform:none}40%{transform:translateY(-22px) rotate(10deg)}70%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes wobble{0%,100%{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}
@keyframes wave{0%,100%{transform:none}50%{transform:rotate(-55deg)}}
@keyframes beat{0%,100%{transform:none}40%{transform:scale(1.24)}}
@keyframes blink{0%,30%,60%,100%{transform:none}45%{transform:scaleY(.1)}}
@keyframes steam{0%{transform:translateY(8px);opacity:.2}55%{opacity:1}100%{transform:translateY(-12px);opacity:0}}
@keyframes clinkl{0%,100%{transform:none}45%{transform:translateX(11px) rotate(12deg)}}
@keyframes clinkr{0%,100%{transform:none}45%{transform:translateX(-11px) rotate(-12deg)}}
@keyframes straw{0%,100%{transform:none}30%{transform:rotate(14deg)}65%{transform:rotate(-10deg)}}
@keyframes cap{0%,100%{transform:none}35%,65%{transform:translateY(-14px) rotate(8deg)}}
@keyframes fanl{0%,100%{transform:none}35%,65%{transform:rotate(-12deg)}}
@keyframes fanr{0%,100%{transform:none}35%,65%{transform:rotate(12deg)}}
@keyframes flipx{0%,100%{transform:none}45%{transform:scaleX(0)}70%{transform:scaleX(-1)}85%{transform:scaleX(-1)}}
@keyframes flipy{0%,100%{transform:none}35%,65%{transform:scaleY(.08)}}
@keyframes peel{0%,100%{transform:none}35%,65%{transform:rotate(-10deg) translateY(-5px)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes drop{from{transform:translateY(-34px);opacity:0}to{transform:none;opacity:1}}
@keyframes drive{0%,100%{transform:none}35%{transform:translateX(16px)}70%{transform:translateX(-12px)}}
@keyframes carriage{0%,100%{transform:none}70%{transform:translateX(-22px)}}
@keyframes snap{0%,100%{transform:none}30%,55%{transform:translate(12px,-14px) rotate(9deg)}}
@keyframes glow{0%,100%{transform:none;opacity:1}30%{opacity:.15}60%{transform:scale(1.2);opacity:1}}
@keyframes fall{0%{transform:translateY(-6px)}100%{transform:translateY(30px);opacity:0}}
@keyframes float{0%,100%{transform:none}45%{transform:translateY(-12px) rotate(3deg)}}
@keyframes flame{0%,100%{transform:none}50%{transform:scale(.8,1.2) rotate(6deg)}}
@keyframes ripple{0%,100%{transform:none}30%{transform:skewX(5deg)}65%{transform:skewX(-4deg)}}
@keyframes lidup{0%,100%{transform:none}35%,62%{transform:translateY(-22px) rotate(-7deg)}}
}

/* ---------- Fondo que acompaña el scroll: siempre detrás del contenido ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--paper);pointer-events:none}
@media (min-width:1360px){
body::after{content:"";position:fixed;inset:0 0 -320px;z-index:-1;pointer-events:none;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='460' fill='none' stroke='%231F1B16' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M35 40c-7-7-17 3-9 11l9 9 9-9c8-8-2-18-9-11z'/%3E%3Cpath d='M20 190l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M50 330q0 12 12 12q-12 0-12 12q0-12-12-12q12 0 12-12z'/%3E%3C/svg%3E") left 24px top 0/70px 460px repeat-y,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='460' fill='none' stroke='%231F1B16' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M46 110l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M22 260q0 12 12 12q-12 0-12 12q0-12-12-12q12 0 12-12z'/%3E%3Cpath d='M40 400c-7-7-17 3-9 11l9 9 9-9c8-8-2-18-9-11z'/%3E%3C/svg%3E") right 24px top 0/70px 460px repeat-y}
}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
body::before{animation:fondo linear both;animation-timeline:scroll(root)}
body::after{animation:fondoDet linear both;animation-timeline:scroll(root)}
@keyframes fondo{0%{background-color:#FBF6EA}30%{background-color:#EEF4F9}55%{background-color:#FCEEEA}80%{background-color:#ECF6EF}100%{background-color:#FBF3D8}}
@keyframes fondoDet{to{transform:translateY(-320px)}}
}}

/* ---------- Banner de Navidad ---------- */
.xmas-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;padding:14px var(--gut);background:var(--accent);color:#fff;border-bottom:3px solid var(--ink);text-decoration:none;font-weight:800;text-align:center;transition:background-color .2s ease}
.xmas-banner:hover{background:#B23A28;color:#fff}
.xmas-banner .hand{font-size:28px;line-height:1.1}
.xmas-banner strong{background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);border-radius:10px;padding:2px 12px}