/* polish: textura, hilo de progreso, pasos, animación de tejido */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:6px;z-index:80;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#d1366f,#f0b232,#3da697,#4b9be8,#876cdc,#f0864f)}
.hero .sticker{transition:rotate .4s cubic-bezier(.3,1.6,.5,1)}.hero .sticker:hover{rotate:-5deg}
.hero .hx2{animation:float 7s ease-in-out infinite}
@keyframes float{50%{translate:0 -14px;rotate:3deg}}
.how{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:0;margin:30px 0 0;counter-reset:h}
.how li{counter-increment:h;border:3px solid #fff;padding:14px 18px 14px 58px;font-size:16px;position:relative}
.how li::before{content:counter(h);position:absolute;left:14px;top:50%;translate:0 -50%;font:400 40px/1 Anton,sans-serif;color:#f0b232}
.how li:nth-child(odd){rotate:-.8deg}.how li:nth-child(even){rotate:.8deg}
#grid:not(.on) .hx.t,#grid:not(.on) .hx.p{opacity:0}
#grid.on .hx.t,#grid.on .hx.p{animation:pop .55s var(--d,0s) backwards}
@keyframes pop{from{scale:.1;opacity:0;rotate:60deg}}
input[type=number]{max-width:110px}
.hx.f:focus-visible{outline:none}

.hx.f.sel{background:#f0b232;scale:1.35;z-index:2}.hx.f.sel::after{background:#f0b232}
#sb{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:75;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;background:var(--g2);color:#fff;border:3px solid #fff;padding:12px 18px;box-shadow:6px 6px 0 #f0b232;max-width:94vw;font-weight:800}
#sb[hidden]{display:none}
#sb .btn{padding:8px 16px;font-size:15px;box-shadow:3px 3px 0 #fff}

.hx span{position:relative;z-index:1;font:400 17px/1 Anton,sans-serif;color:#0a2e0e;pointer-events:none}
.hx.t span{color:#fff}
.hx.r{background:#f0b232;cursor:help;animation:pulse 1.6s ease-in-out infinite}.hx.r::after{background:var(--g2)}
@keyframes pulse{50%{opacity:.35}}
.dot.r{background:#f0b232}
.muro{display:flex;flex-wrap:wrap;gap:12px}
.pd{border:3px solid #fff;padding:10px 16px;display:flex;flex-direction:column;line-height:1.3;word-break:break-word}
.pd b{font-size:19px}.pd span{font-size:14px;color:#b7cdb9}

.hx span{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:13px;max-width:96%;overflow:hidden}