:root{--tinta:#4d5722;--honda:#3b431a;--papel:#ebe6d6;--claro:#f4f0e4;--linea:#cfc7b0;--rojo:#9a3324;
  --f:"Bricolage Grotesque",system-ui,sans-serif;--p:"Mansalva",cursive}
*{box-sizing:border-box;margin:0}
html{background:var(--papel)}
body{font-family:var(--f);color:var(--honda);background:var(--papel);min-height:100dvh;
  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 type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .26 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-tap-highlight-color:transparent}
#app{max-width:440px;margin:0 auto;padding:20px 16px calc(28px + env(safe-area-inset-bottom))}
.vista{display:flex;flex-direction:column;gap:16px}
[hidden]{display:none!important}
.logo{width:min(220px,60vw);align-self:center;margin-top:8px}
.pincel{font-family:var(--p);font-size:34px;line-height:1.05;color:var(--tinta);text-align:center}
.lead{text-align:center;font-size:18px;line-height:1.35}
.chico{font-size:13px;opacity:.75}
.centro{text-align:center}
a{color:var(--tinta)}
.hoja{display:flex;flex-direction:column;gap:14px;background:var(--claro);border:2px solid var(--honda);border-radius:14px;padding:18px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
input{font:inherit;font-size:20px;padding:12px 14px;border:2px solid var(--linea);border-radius:10px;background:#fff;color:var(--honda)}
input:focus{outline:none;border-color:var(--tinta)}
.btn{font:inherit;font-weight:800;font-size:18px;border:2px solid var(--honda);background:var(--tinta);color:var(--papel);
  border-radius:12px;padding:14px 16px;cursor:pointer;text-align:center;text-decoration:none;display:block;width:100%}
.btn:active{transform:translateY(1px)}
.btn.grande{font-size:20px;padding:18px}
.btn.grande .chico{color:var(--papel);font-weight:400}
.btn.borde{background:transparent;color:var(--honda);font-size:15px;padding:12px 10px}
.btn.claro{background:var(--papel);color:var(--honda)}
.error{color:var(--rojo);font-weight:600;font-size:14px;text-align:center}
.cab{display:flex;align-items:center;gap:12px}
.mini{width:56px;height:56px}
.hola{font-size:20px}
.tarjeta{background:var(--tinta);color:var(--papel);border-radius:16px;padding:18px 16px;border:2px solid var(--honda);
  box-shadow:0 3px 0 var(--honda)}
.sellos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.s{aspect-ratio:1;border:2.5px dashed rgba(235,230,214,.55);border-radius:14px;display:grid;place-items:center;
  font-family:var(--p);font-size:30px;color:rgba(235,230,214,.6);position:relative}
.s img{width:86%;height:86%}
.s.lleno{border:2.5px solid var(--papel);background:var(--papel)}
.s.lleno.nuevo{animation:pop .5s ease-out}
.s.casa{border-style:solid;border-color:var(--papel);font-size:17px;line-height:1;text-align:center;color:var(--papel);padding:6px}
.s.casa.listo{background:var(--papel);color:var(--tinta);animation:latido 1.4s ease-in-out infinite}
.faltan{text-align:center;margin-top:14px;font-size:17px}
.premio{background:var(--claro);border:2.5px solid var(--tinta);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.reglas{font-size:14px;line-height:1.45;border-top:1.5px solid var(--linea);border-bottom:1.5px solid var(--linea);padding:12px 2px;display:flex;flex-direction:column;gap:4px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@keyframes pop{0%{transform:scale(.4) rotate(-12deg);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes latido{50%{transform:scale(1.06)}}

.panel{position:fixed;inset:0;background:rgba(30,34,14,.55);display:flex;align-items:flex-end;justify-content:center;z-index:5}
.hoja-panel{background:var(--papel);width:100%;max-width:440px;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;align-items:center}
.etq{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--honda);color:var(--papel);padding:4px 10px;border-radius:99px}
h2{font-size:24px}
.cantidad{text-align:center}
.stepper{display:flex;align-items:center;gap:18px;margin-top:6px}
.stepper button{font:inherit;font-size:28px;font-weight:800;width:54px;height:54px;border-radius:50%;border:2px solid var(--honda);background:var(--claro);color:var(--honda)}
.stepper output{font-size:40px;font-weight:800;min-width:40px;text-align:center}
.puntos{display:flex;gap:14px;margin:4px 0}
.puntos i{width:16px;height:16px;border-radius:50%;border:2px solid var(--honda)}
.puntos i.on{background:var(--honda)}
.puntos.mal{animation:temblor .35s}
@keyframes temblor{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.teclado{display:grid;grid-template-columns:repeat(3,72px);gap:10px}
.teclado button{font:inherit;font-size:26px;font-weight:600;height:60px;border-radius:12px;border:2px solid var(--linea);background:#fff;color:var(--honda)}
.teclado button:active{background:var(--claro)}
.aviso{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:var(--honda);color:var(--papel);padding:12px 18px;border-radius:12px;font-weight:600;z-index:9;max-width:90vw;text-align:center}