/* Sticker shop page. Builds on order.css (same tokens, header, buttons). */
.s-hero{padding:56px 0 44px;background:radial-gradient(900px 420px at 100% -10%,rgba(224,0,122,.16),transparent 60%),radial-gradient(700px 380px at -10% 110%,rgba(10,165,200,.16),transparent 60%)}
.s-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.s-hero h1{font-size:clamp(38px,6vw,68px);text-transform:uppercase;line-height:1}
.s-hero h1 em{font-style:normal;color:var(--magenta)}
.s-hero .lead{color:var(--muted);font-size:18px;max-width:520px;margin-top:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.art{position:relative;aspect-ratio:1/1;max-width:440px;margin-left:auto;width:100%}
.art .st{position:absolute;display:grid;place-items:center;text-align:center;color:#fff;font:600 clamp(14px,2vw,20px)/1.05 Oswald,Arial,sans-serif;text-transform:uppercase;box-shadow:0 18px 36px rgba(22,24,29,.18);border:6px solid #fff}
.art .a1{width:52%;aspect-ratio:1;border-radius:50%;background:var(--magenta);left:4%;top:6%;transform:rotate(-8deg)}
.art .a2{width:42%;aspect-ratio:1;border-radius:18px;background:var(--cyan);right:2%;top:22%;transform:rotate(9deg)}
.art .a3{width:58%;aspect-ratio:1.7;border-radius:16px;background:var(--ink);left:14%;bottom:8%;transform:rotate(4deg)}
.art .a4{width:26%;aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--ink);right:8%;bottom:4%;transform:rotate(-12deg);font-size:clamp(11px,1.5vw,15px)}
@media(max-width:820px){.s-hero .wrap{grid-template-columns:1fr}.art{max-width:320px;margin:10px auto 0}}

.badges{border-block:1px solid var(--line);background:#fff}
.badges ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.badges li{display:flex;align-items:center;gap:10px;padding:16px 6px;font-weight:600;font-size:14.5px}
.badges li span{font-size:22px}
@media(max-width:820px){.badges ul{grid-template-columns:1fr 1fr}}

.block{padding:64px 0}
.block.soft{background:var(--soft)}
.head{max-width:680px;margin-bottom:28px}
.head h2{font-size:clamp(28px,4vw,42px);text-transform:uppercase}
.head p{color:var(--muted);font-size:17px;margin-top:8px}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.how li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.how b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;font-size:17px;margin-bottom:12px}
.how li:nth-child(1) b{background:var(--cyan)}.how li:nth-child(2) b{background:var(--magenta)}.how li:nth-child(3) b{background:#e0b100}
.how h3{font-size:21px;text-transform:uppercase;margin-bottom:4px}
.how p{color:var(--muted)}
@media(max-width:760px){.how{grid-template-columns:1fr}}

.shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.shape{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px 12px;text-align:center;cursor:pointer;font:inherit;color:inherit;transition:transform .12s,border-color .12s,box-shadow .12s}
.shape:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 12px 28px rgba(22,24,29,.08)}
.shape .ic{height:74px;display:grid;place-items:center;margin-bottom:10px}
.shape .ic i{display:block;background:var(--magenta)}
.shape h3{font-size:18px;text-transform:uppercase}
.shape p{color:var(--muted);font-size:13.5px}
@media(max-width:820px){.shapes{grid-template-columns:repeat(2,1fr)}.shapes .shape:last-child{grid-column:1/-1}}
.ic .circle{width:64px;height:64px;border-radius:50%}
.ic .square{width:60px;height:60px;border-radius:8px;background:var(--cyan)!important}
.ic .rect{width:80px;height:50px;border-radius:8px;background:var(--ink)!important}
.ic svg{width:74px;height:74px}

/* builder */
.builder{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}
.opt{margin-bottom:24px}
.opt>.lbl{display:flex;align-items:center;gap:10px;font:600 18px Oswald,Arial,sans-serif;text-transform:uppercase;margin-bottom:12px}
.opt>.lbl i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 14px Rubik,Arial,sans-serif;background:var(--magenta)}
.custom{display:none;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.custom.on{display:flex}
.custom input{width:110px!important}
.custom small{color:var(--muted)}
.summary{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:20px;padding:24px;box-shadow:0 18px 40px rgba(22,24,29,.18)}
.summary h3{font-size:22px;text-transform:uppercase;margin-bottom:14px}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:15px}
.summary dt{color:#aab0bb}.summary dd{font-weight:600;text-align:right}
.summary .price{margin:18px 0 4px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.25);display:flex;justify-content:space-between;align-items:baseline}
.summary .price b{font:600 34px Oswald,Arial,sans-serif;color:var(--yellow)}
.summary .price small{color:#aab0bb}
.summary .tiny{color:#aab0bb;font-size:13px;margin-bottom:16px}
.summary .btn{width:100%}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pack{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.pack .tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--magenta);border-radius:999px;padding:4px 10px}
.pack h3{font-size:22px;text-transform:uppercase}
.pack p{color:var(--muted);flex:1}
.pack .pp{font:600 26px Oswald,Arial,sans-serif}
.pack .btn{padding:12px 18px;font-size:15px}
@media(max-width:820px){.packs{grid-template-columns:1fr}}

.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tips div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.tips h3{font-size:17px;text-transform:uppercase;margin-bottom:4px}
.tips p{color:var(--muted);font-size:14.5px}
@media(max-width:820px){.tips{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tips{grid-template-columns:1fr}}

.final{background:var(--magenta);color:#fff;text-align:center;padding:56px 0}
.final h2{font-size:clamp(30px,4.6vw,48px);text-transform:uppercase}
.final p{font-size:17px;opacity:.92;margin:8px auto 22px;max-width:560px}
.final .btn-light{background:#fff;color:var(--ink)}
/* chip labels that carry EN/ES spans */
.chip span span{display:inline;padding:0;border:0;background:none;color:inherit;border-radius:0;box-shadow:none;font:inherit}
.chip span span[data-es]{display:none}
html[lang=es] .chip span span[data-en]{display:none}
html[lang=es] .chip span span[data-es]{display:inline}
.badges li{min-width:0}
@media(max-width:480px){.badges li{font-size:13px;gap:8px}.badges li span{font-size:13px}.badges li span:first-child{font-size:18px}}