:root{
  --paper:#fcfcf8;
  --grid:rgba(66,133,244,.16);
  --margin:#f18a8a;
  --ink:#16162b;
  --pink:#ff2e93;
  --blue:#2563eb;
  --yellow:#ffe21a;
  --green:#12c26a;
  --orange:#ff7a1a;
  --violet:#7c3aed;
  --display:'Rubik',system-ui,sans-serif;
  --hand:'Caveat Brush','Comic Sans MS',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:400;font-size:17px;line-height:1.55;overflow-x:hidden;position:relative}
/* Hoja cuadriculada con margen */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  linear-gradient(90deg,transparent calc(6.5vw - 1px),var(--margin) calc(6.5vw - 1px) calc(6.5vw + 1px),transparent calc(6.5vw + 1px)),
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/28px 28px,var(--paper)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--yellow)}

.scr{font-family:var(--hand);font-weight:400;color:var(--pink);position:relative;white-space:nowrap;font-size:1.12em;letter-spacing:.01em}
.scr::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;height:.2em;background:var(--yellow);z-index:-1;border-radius:30px;transform:rotate(-1deg)}
.note-tag{display:inline-block;font-family:var(--hand);font-size:22px;color:var(--blue);margin-bottom:12px;transform:rotate(-2deg)}
.btn{display:inline-block;background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:60px;padding:13px 30px;font-weight:700;font-size:17px;transition:transform .2s,box-shadow .2s;text-align:center}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:5px 5px 0 var(--pink)}
.btn.line{background:#fff;color:var(--ink)}
.btn.full{display:block;width:100%}

/* Header */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:12px 4vw;background:rgba(252,252,248,.9);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}
.logo{font-family:var(--hand);font-size:38px;line-height:.9;position:relative;display:inline-block}
.logo svg{position:absolute;left:0;bottom:-7px;width:100%;height:10px;color:var(--pink)}
.top nav{display:flex;gap:6px}
.top nav a{font-weight:700;font-size:14px;padding:7px 14px;border-radius:30px;border:2px solid transparent;transition:.2s}
.top nav a:hover{border-color:var(--ink);background:var(--yellow)}
.order{background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:40px;padding:7px 18px;font-weight:700;transition:.2s}
.order:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
.order b{display:inline-block;min-width:22px;margin-left:6px;background:#fff;color:var(--ink);border-radius:20px;text-align:center}
.order.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.12) rotate(-4deg)}}

/* Hero + lienzo */
.hero{position:relative;height:100vh;min-height:680px;padding-top:70px;overflow:hidden;border-bottom:3px solid var(--ink)}
#paint{position:absolute;inset:70px 0 0 0;width:100%;height:calc(100% - 70px);display:block;z-index:3;touch-action:none;cursor:crosshair}
.hero-word{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);text-align:center;font-weight:800;font-size:clamp(90px,22vw,360px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:3px rgba(22,22,43,.12);z-index:1;pointer-events:none;white-space:nowrap}
.hero-ui{position:absolute;inset:70px 0 0 0;z-index:4;pointer-events:none}
.hero-ui>*{pointer-events:none}
.hero-ui .btn,.tools,.dock{pointer-events:auto}
.hero-copy{position:absolute;left:calc(6.5vw + 24px);top:40px;max-width:min(620px,70vw)}
h1{font-weight:800;font-size:clamp(40px,5.6vw,92px);line-height:1;letter-spacing:-.03em;margin-bottom:18px}
.lead{max-width:44ch;font-size:19px;margin-bottom:22px;font-weight:500}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.tools{position:absolute;right:4vw;top:36px;display:flex;flex-direction:column;gap:10px;align-items:stretch;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:12px;box-shadow:6px 6px 0 var(--ink)}
.tools button{background:var(--paper);border:2px solid var(--ink);border-radius:30px;padding:6px 14px;font-weight:700;font-size:14px;transition:.15s}
.tools button:hover{background:var(--yellow)}
.sizes{display:flex;gap:6px;justify-content:center;align-items:center;padding-bottom:6px;border-bottom:2px dashed var(--ink)}
.sizes button{width:38px;height:38px;border-radius:50%;padding:0;display:grid;place-items:center;border-width:2px}
.sizes button i{display:block;border-radius:50%;background:var(--ink)}
.sizes button[aria-checked="true"]{background:var(--ink)}
.sizes button[aria-checked="true"] i{background:#fff}
.dock{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:4px;align-items:flex-end;padding:0 18px}
.cap{position:relative;width:46px;height:118px;border:0;background:none;padding:0;transform:translateY(34px);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cap:hover{transform:translateY(12px)}
.cap[aria-checked="true"]{transform:translateY(-8px)}
.cap svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.cap.eraser svg .b{fill:#fff}
.draw-hint{position:absolute;right:calc(4vw + 6px);bottom:140px;font-family:var(--hand);font-size:24px;color:var(--blue);transform:rotate(3deg);transition:opacity .6s}
.draw-hint.gone{opacity:0}

.strip{height:30px;background:repeating-linear-gradient(90deg,var(--pink) 0 8.333%,var(--orange) 8.333% 16.666%,var(--yellow) 16.666% 25%,var(--green) 25% 33.333%,#19c6c6 33.333% 41.666%,var(--blue) 41.666% 50%,var(--violet) 50% 58.333%,#d86cff 58.333% 66.666%,var(--pink) 66.666% 75%,var(--orange) 75% 83.333%,var(--yellow) 83.333% 91.666%,var(--green) 91.666% 100%);border-bottom:3px solid var(--ink)}

/* Secciones */
.sec{padding:110px 4vw 0 calc(6.5vw + 28px);max-width:1500px;margin:0 auto}
.head{margin-bottom:46px;max-width:900px}
h2{font-weight:800;font-size:clamp(36px,5vw,78px);line-height:1;letter-spacing:-.03em}
.sub{margin-top:16px;max-width:52ch;font-size:19px}

/* Cajas listas */
.sets{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.set{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:7px 7px 0 var(--c,var(--pink));transition:transform .25s,box-shadow .25s}
.set:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--c,var(--pink))}
.fan{position:relative;height:210px;margin:6px 0 0}
.fan svg{position:absolute;bottom:0;width:36px;height:190px;left:50%;overflow:visible;transform-origin:50% 100%;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.set .tag{font-family:var(--hand);font-size:22px;color:var(--c,var(--pink))}
.set h3{font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em}
.set p{font-size:15px}
.set .dots{display:flex;flex-wrap:wrap;gap:4px}
.set .dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.set .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.set .pr{font-weight:800;font-size:30px;letter-spacing:-.02em}
.set .pr small{display:block;font-weight:500;font-size:12px;opacity:.65;letter-spacing:0}
.set .add{background:var(--ink);color:#fff;border:0;border-radius:30px;padding:9px 20px;font-weight:700;transition:.2s}
.set .add:hover{background:var(--c,var(--pink))}

/* Armador */
.builder{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:start}
.b-left{position:sticky;top:96px;display:grid;gap:22px}
.box-wrap{background:#e8c995;border:3px solid var(--ink);border-radius:20px;padding:20px;box-shadow:8px 8px 0 var(--ink);position:relative;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 2px,transparent 2px 6px)}
.box{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:6px;background:rgba(0,0,0,.18);border-radius:12px;padding:12px;box-shadow:inset 0 4px 10px rgba(0,0,0,.25)}
.slot{position:relative;border:0;background:none;padding:0;aspect-ratio:160/38;min-width:0}
.slot svg{display:block;width:100%;height:100%;overflow:visible}
.slot.empty{border:2px dashed rgba(255,255,255,.55);border-radius:20px;cursor:default}
.slot.full{transition:transform .15s}
.slot.full:hover{transform:translateX(-4px) rotate(-2deg)}
.slot.pop{animation:slotpop .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes slotpop{from{transform:scale(.4) rotate(-12deg);opacity:0}}
.box-meta{margin-top:12px;font-family:var(--hand);font-size:24px;text-align:center;color:var(--ink)}
.day{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:16px 20px}
.day h3{font-family:var(--hand);font-weight:400;font-size:26px;line-height:1}
.day p{font-size:14px;line-height:1.3}
.day-sw{display:flex;gap:6px;grid-row:1}
.day-sw i{width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);display:block}
.day-btns{grid-column:1/-1;display:flex;gap:8px}
.mini{background:#fff;border:2px solid var(--ink);border-radius:30px;padding:6px 14px;font-weight:700;font-size:14px;transition:.15s}
.mini:hover{background:var(--yellow)}
.mini.fill{background:var(--ink);color:#fff}
.mini.fill:hover{background:var(--pink)}
fieldset{border:0;padding:0 0 22px;margin-bottom:4px;border-bottom:2px dashed var(--ink)}
legend{font-family:var(--hand);font-size:28px;margin-bottom:8px;display:block}
legend small{font-family:var(--display);font-size:13px;font-weight:700;color:var(--blue);margin-left:8px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 16px;font-weight:700;font-size:15px;text-align:left;transition:.15s}
.seg button small{display:block;font-weight:500;font-size:12px;opacity:.7}
.seg button:hover{background:var(--yellow)}
.seg button[aria-checked="true"]{background:var(--ink);color:#fff}
.palette{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-bottom:12px}
.sw{position:relative;aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);padding:0;transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.sw:hover{transform:scale(1.25);z-index:2}
.sw .cnt{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:20px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:none;place-items:center;padding:0 5px}
.sw.has .cnt{display:grid}
.pal-btns{display:flex;gap:8px;flex-wrap:wrap}
.buy{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:6px}
.buy small{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.buy b{font-weight:800;font-size:56px;line-height:1;letter-spacing:-.03em}
.buy em{display:block;font-style:normal;font-size:13px;opacity:.7}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* Puntas */
.tips{display:grid;gap:0;border-top:3px solid var(--ink)}
.tip{display:grid;grid-template-columns:200px 1fr 260px;gap:30px;align-items:center;padding:26px 0;border-bottom:3px solid var(--ink)}
.tip h3{font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em}
.tip small{display:block;font-family:var(--hand);font-size:22px;color:var(--blue);font-weight:400}
.tip svg{width:100%;height:80px;overflow:visible}
.tip path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s cubic-bezier(.4,.1,.2,1)}
.tips.in .tip path{stroke-dashoffset:0}
.tips.in .tip:nth-child(2) path{transition-delay:.3s}
.tips.in .tip:nth-child(3) path{transition-delay:.6s}
.tip p{font-size:15px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}
.acc details{border-bottom:3px solid var(--ink)}
.acc details:first-child{border-top:3px solid var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-weight:700;font-size:21px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--hand);font-size:42px;color:var(--pink);transition:transform .3s;line-height:1}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{padding:0 40px 18px 0;animation:fd .4s}
@keyframes fd{from{opacity:0;transform:translateY(-6px)}}

/* Contacto */
.contact{max-width:none;margin-top:110px;padding:90px 4vw 90px calc(6.5vw + 28px);background:var(--yellow);border-block:3px solid var(--ink)}
.contact .note-tag{color:var(--ink)}
.contact .scr{color:var(--pink)}
.contact .scr::after{background:#fff}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1300px}
.info{list-style:none;display:grid;gap:16px;margin-top:28px;font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-.02em}
.info small{display:block;font-family:var(--hand);font-weight:400;font-size:22px;color:var(--blue);letter-spacing:0}
#form{display:grid;gap:16px;align-content:start}
label{display:grid;gap:5px;font-weight:700;font-size:14px}
#form input,#form textarea{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:11px 14px;font-size:17px;outline:none;resize:none;width:100%}
#form input:focus,#form textarea:focus{box-shadow:5px 5px 0 var(--ink)}
#form .error{border-color:#d41f3f}
.msg{min-height:22px;font-weight:700}

footer{background:var(--ink);color:var(--paper);padding:0 4vw 24px;overflow:hidden}
.foot-lines{height:16px;margin:0 -4vw 30px;background:repeating-linear-gradient(90deg,var(--pink) 0 8.333%,var(--orange) 8.333% 16.666%,var(--yellow) 16.666% 25%,var(--green) 25% 33.333%,#19c6c6 33.333% 41.666%,var(--blue) 41.666% 50%,var(--violet) 50% 58.333%,#d86cff 58.333% 66.666%,var(--pink) 66.666% 75%,var(--orange) 75% 83.333%,var(--yellow) 83.333% 91.666%,var(--green) 91.666% 100%)}
.foot-big{font-family:var(--hand);font-size:clamp(100px,26vw,430px);line-height:.85;text-align:center;color:var(--yellow);margin-bottom:20px}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:14px;opacity:.85}

/* Popover de pedido */
.pop{position:fixed;top:68px;right:4vw;width:min(400px,92vw);max-height:calc(100vh - 90px);background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--pink);z-index:90;display:flex;flex-direction:column;opacity:0;transform:translateY(-14px) scale(.96);transform-origin:90% 0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:3px dashed var(--ink)}
.pop-head h3{font-family:var(--hand);font-weight:400;font-size:30px}
.pop-head button{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-weight:700}
.pop-list{overflow:auto;padding:4px 20px;flex:1}
.p-item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:2px dashed rgba(22,22,43,.3);align-items:center}
.p-item h4{font-weight:800;font-size:18px;line-height:1.1}
.p-item .pr{font-weight:800;font-size:18px;text-align:right}
.p-item small{font-size:12px;opacity:.75;line-height:1.3;grid-column:1/-1}
.p-item .dots{display:flex;gap:3px;flex-wrap:wrap;grid-column:1/-1;margin:2px 0}
.p-item .dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink)}
.qty{display:inline-flex;gap:10px;align-items:center;grid-column:1}
.qty button{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-weight:700;line-height:1}
.qty button:hover{background:var(--yellow)}
.p-empty{padding:30px 0;text-align:center}
.pop-foot{padding:14px 20px 18px;border-top:3px dashed var(--ink);display:grid;gap:8px}
.tot{display:flex;justify-content:space-between;align-items:baseline}
.tot span{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.tot b{font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;color:var(--pink)}
.note{font-size:13px}
a.btn.disabled{opacity:.35;pointer-events:none}
.clear{background:none;border:0;text-decoration:underline;font-weight:700;font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,130px);background:var(--ink);color:#fff;padding:11px 26px;border-radius:40px;font-weight:700;z-index:100;transition:transform .35s cubic-bezier(.3,1.5,.5,1);white-space:nowrap}
.toast.show{transform:translate(-50%,0)}

.rv{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

@media(max-width:1100px){
  .top nav{display:none}
  .sec{padding-left:calc(6.5vw + 16px)}
  .sets{grid-template-columns:repeat(2,1fr)}
  .builder,.faq-grid,.contact-in{grid-template-columns:1fr}
  .b-left{position:static}
  .tip{grid-template-columns:1fr;gap:10px}
  .hero-copy{max-width:60vw}
  .tools{flex-direction:row;flex-wrap:wrap;top:auto;bottom:150px;right:auto;left:calc(6.5vw + 16px)}
  .sizes{border:0;padding:0}
  .draw-hint{display:none}
  .palette{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:620px){
  .sets{grid-template-columns:1fr}
  .hero-copy{max-width:88vw;left:calc(6.5vw + 14px)}
  .lead{display:none}
  .cap{width:34px;height:96px}
  .info{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .tip path{transition:none;stroke-dashoffset:0}
  .rv{opacity:1;transform:none;transition:none}
}
.builder>*{min-width:0}
.day>div:first-child{grid-column:1;grid-row:1}
.day-sw{grid-column:2;grid-row:1}
.hero-copy{top:58px}
.tools{top:50px}