:root{
  --paper:#f4ecdf;
  --ink:#141010;
  --tomato:#ff4d2e;
  --pink:#ffb3c7;
  --sun:#ffd23f;
  --white:#fffaf2;
  --display:'Anton',Impact,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
::selection{background:var(--tomato);color:var(--white)}

/* Ticker */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.ticker-track{display:inline-flex;gap:40px;padding:9px 0;animation:marquee 28s linear infinite}
.ticker-track span{flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Barra */
.bar{
  position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 4vw;
}
.logo{font-family:var(--display);font-size:30px;letter-spacing:.02em;line-height:1}
.logo sup{font-size:12px;vertical-align:top}
.bar nav{display:flex;gap:34px;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
.bar nav a{position:relative}
.bar nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;background:var(--tomato);transition:width .25s}
.bar nav a:hover::after{width:100%}
.cart-btn{
  background:var(--sun);border:2px solid var(--ink);border-radius:40px;padding:8px 18px;font-weight:800;
  box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s;
}
.cart-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.cart-btn b{display:inline-block;background:var(--ink);color:var(--paper);min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;margin-left:6px;font-size:13px}
.cart-btn.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.12) rotate(-3deg)}}

/* Botones */
.btn{
  display:inline-block;background:var(--tomato);color:var(--white);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  border:2px solid var(--ink);border-radius:8px;padding:15px 26px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-align:center;
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--white);color:var(--ink)}
.btn.full{display:block;width:100%}

/* Hero */
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;padding:70px 4vw 60px;min-height:76vh}
.tag{display:inline-block;background:var(--pink);border:2px solid var(--ink);padding:4px 14px;border-radius:30px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(56px,9.5vw,148px);line-height:.95;margin:22px 0}
h1 span{display:block}
h1 .hl{background:var(--tomato);color:var(--white);display:inline-block;padding:0 .12em;transform:rotate(-1.5deg);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.lead{max-width:48ch;font-size:19px;margin-bottom:30px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}

.hero-art{position:relative;height:420px}
.swatch-stack{position:absolute;inset:40px 0 0 30px;display:flex;gap:0}
.swatch-stack i{
  flex:1;background:var(--c);border:3px solid var(--ink);border-radius:999px 999px 14px 14px;margin-left:-14px;
  transform-origin:bottom;transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.swatch-stack i:nth-child(odd){margin-top:60px}
.swatch-stack i:hover{transform:translateY(-22px) rotate(-3deg)}
.sticker{position:absolute;top:-10px;right:0;width:150px;height:150px;z-index:2;display:grid;place-items:center;animation:spin 18s linear infinite;background:var(--sun);border:3px solid var(--ink);border-radius:50%}
.sticker svg{position:absolute;inset:0;width:100%;height:100%}
.sticker text{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;fill:var(--ink)}
.sticker b{font-family:var(--display);font-size:42px;font-weight:400;animation:spin 18s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* Números */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-block:2px solid var(--ink);background:var(--white)}
.numbers div{padding:26px 4vw;border-right:2px solid var(--ink)}
.numbers div:last-child{border:0}
.numbers b{display:block;font-family:var(--display);font-weight:400;font-size:44px;line-height:1}
.numbers span{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* Bloques */
.block{padding:90px 4vw 20px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(46px,7vw,100px);line-height:.95}
.head p{font-weight:600;max-width:36ch}

/* Herramientas */
.tools{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--white);border:2px solid var(--ink);border-radius:30px;padding:8px 18px;font-weight:800;font-size:14px;transition:.15s}
.chip:hover{background:var(--pink)}
.chip.on{background:var(--ink);color:var(--paper)}
.tools-right{display:flex;gap:10px;flex-wrap:wrap}
.tools-right input,.tools-right select,.mixer input,.mixer select,.wh-form input{
  background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:10px 14px;outline:none;width:100%;
}
.tools-right input,.tools-right select{width:auto}
input:focus,select:focus{box-shadow:3px 3px 0 var(--tomato)}
input.error{border-color:var(--tomato);box-shadow:3px 3px 0 var(--tomato)}

/* Grid productos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.card{
  background:var(--white);border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
  opacity:0;transform:translateY(24px);animation:in .5s forwards;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
@keyframes in{to{opacity:1;transform:none}}
.art{height:170px;background:var(--bg);border-bottom:2px solid var(--ink);display:grid;place-items:center;position:relative}
.art svg{width:96px;height:96px;transition:transform .3s}
.card:hover .art svg{transform:rotate(-8deg) scale(1.1)}
.art em{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--paper);font-style:normal;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px}
.info{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.info h3{font-size:18px;line-height:1.25;font-weight:800}
.info p{font-size:14px;opacity:.75;flex:1}
.buy{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.price{font-family:var(--display);font-size:28px}
.add{background:var(--sun);border:2px solid var(--ink);border-radius:8px;padding:8px 14px;font-weight:800;font-size:13px;text-transform:uppercase;transition:.15s}
.add:hover{background:var(--tomato);color:var(--white)}
.empty{padding:50px 0;font-weight:800;font-size:20px;text-align:center}

/* Color */
.color{margin-top:70px;background:var(--pink);border-block:2px solid var(--ink);padding-bottom:90px}
.color-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.chart,.mixer,.wh-form{background:var(--white);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:26px}
.tone-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.sw{
  aspect-ratio:1/2.2;border:2px solid var(--ink);border-radius:999px 999px 8px 8px;background:var(--c);position:relative;transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.sw span{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-weight:800;font-size:12px}
.sw:hover{transform:translateY(-8px)}
.sw.on{transform:translateY(-14px);box-shadow:4px 4px 0 var(--ink)}
.swatches{padding-bottom:30px}
.swatch-info{display:flex;gap:18px;align-items:center;margin-top:12px;border-top:2px dashed var(--ink);padding-top:20px}
.swatch-info b{font-family:var(--display);font-weight:400;font-size:56px;line-height:1;min-width:100px}
.swatch-info strong{display:block;font-size:20px}
.swatch-info span{font-size:14px;opacity:.8}

.mixer{display:flex;flex-direction:column;gap:16px}
.mixer h3,.wh-form h3{font-family:var(--display);font-weight:400;font-size:30px;text-transform:uppercase}
label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.mix-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mix-out div{background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:12px}
.mix-out small{display:block;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.mix-out b{font-family:var(--display);font-weight:400;font-size:34px}
.mix-bar{display:flex;height:22px;border:2px solid var(--ink);border-radius:20px;overflow:hidden}
.mix-bar i{display:block;transition:width .3s}
#barA{background:var(--tomato)}
#barB{background:var(--sun)}
.note{font-size:12px;opacity:.7}

/* Mayoristas */
.wholesale{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;padding-bottom:100px}
.wh-left ul{list-style:none;margin-top:30px;display:grid;gap:12px;font-size:20px}
.wh-left li{border-bottom:2px solid var(--ink);padding-bottom:10px}
.wh-left b{display:inline-block;background:var(--tomato);color:var(--white);padding:2px 12px;margin-right:10px;border-radius:6px;border:2px solid var(--ink);font-family:var(--display);font-weight:400;font-size:24px}
.wh-form{display:flex;flex-direction:column;gap:16px;background:var(--sun)}
.msg{min-height:22px;font-weight:800;font-size:14px}
.msg.err{color:var(--tomato)}

/* Footer */
footer{background:var(--ink);color:var(--paper);padding:60px 4vw 30px}
.foot-big{font-family:var(--display);font-size:clamp(70px,18vw,260px);line-height:.9;color:var(--tomato)}
.foot-big sup{font-size:.15em}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin:40px 0}
footer h4{text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--sun);margin-bottom:8px}
.copy{font-size:13px;opacity:.6;border-top:1px solid rgba(255,255,255,.2);padding-top:20px}

/* Carrito */
.overlay{position:fixed;inset:0;background:rgba(20,16,16,.55);z-index:90}
.overlay[hidden]{display:none}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--paper);border-left:3px solid var(--ink);z-index:100;
  display:flex;flex-direction:column;transform:translateX(105%);transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px solid var(--ink);background:var(--sun)}
.drawer-head h3{font-family:var(--display);font-weight:400;font-size:32px;text-transform:uppercase}
.drawer-head button{background:var(--white);border:2px solid var(--ink);border-radius:50%;width:38px;height:38px;font-weight:800}
.drawer-body{flex:1;overflow:auto;padding:16px 24px}
.empty-cart{text-align:center;padding:60px 10px;font-weight:700;opacity:.7}
.item{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:2px dashed var(--ink)}
.item .thumb{width:54px;height:54px;border:2px solid var(--ink);border-radius:10px;background:var(--bg);display:grid;place-items:center}
.item .thumb svg{width:30px;height:30px}
.item h4{font-size:15px;line-height:1.2}
.item small{font-weight:700;opacity:.7}
.qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty button{width:26px;height:26px;border:2px solid var(--ink);background:var(--white);border-radius:6px;font-weight:800;line-height:1}
.qty button:hover{background:var(--pink)}
.rm{background:none;border:0;font-size:12px;text-decoration:underline;font-weight:700}
.drawer-foot{padding:20px 24px 24px;border-top:2px solid var(--ink);background:var(--white);display:grid;gap:8px}
.line{display:flex;justify-content:space-between;font-weight:600}
.line.disc{color:var(--tomato);font-weight:800}
.line.total{font-family:var(--display);font-size:32px;font-weight:400;border-top:2px solid var(--ink);padding-top:8px}
.hint{font-size:13px;font-weight:700;min-height:20px}
.link{background:none;border:0;text-decoration:underline;font-size:13px;font-weight:700;justify-self:center}
.btn.full.disabled{pointer-events:none;opacity:.4}

.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:40px;
  font-weight:800;z-index:120;transition:transform .35s cubic-bezier(.3,1.5,.5,1);white-space:nowrap;
}
.toast.show{transform:translate(-50%,0)}

/* Responsive */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .hero-art{height:300px}
  .sticker{width:110px;height:110px}
  .sticker b{font-size:30px}
  .numbers{grid-template-columns:1fr 1fr}
  .numbers div:nth-child(2){border-right:0}
  .numbers div:nth-child(-n+2){border-bottom:2px solid var(--ink)}
  .color-grid,.wholesale{grid-template-columns:1fr}
  .bar nav{display:none}
  .swatches{gap:4px}
  .swatch-info b{font-size:42px;min-width:70px}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track,.sticker,.sticker b{animation:none}
  .card{animation:none;opacity:1;transform:none}
}