@import url("https://fonts.googleapis.com/css2?family=Anton&family=Nunito:wght@400;600;700;800&display=swap");
:root{--fondo:#f6f6f7;--tarjeta:#fff;--texto:#1d2a33;--suave:#5f6b73;--marca:#b4272b;--marca-osc:#951f23;--azul:#101e27;--azul2:#1a2c38;--ok:#2b8a3e;--error:#c92a2a;--linea:#e2e4e6;--barra:64px}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:17px/1.55 'Nunito','Helvetica Neue',Arial,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* barra superior igual a la de la web: el logo es un link (vuelve al inicio) */
.barra{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;height:calc(var(--barra) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);border-bottom:3px solid var(--marca);background:radial-gradient(ellipse at 85% -40%,rgba(180,39,43,.6),transparent 60%),linear-gradient(170deg,#16293a,#0b151c)}
.barra a{display:flex;align-items:center;justify-content:center;height:100%;padding:0 28px}
.barra img{height:38px;width:auto;display:block;transition:transform .15s}
.barra a:active img{transform:scale(.94)}
img.logo{display:none}
/* páginas del cliente final: el protagonista es la tienda; FerreArtículos va chico abajo ("by") */
body.pub main{padding-top:20px}
.cab-tienda{text-align:center;margin:0 0 16px}
.cab-tienda img{max-width:72%;max-height:110px;object-fit:contain}
.pie-marca{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 4px;color:var(--suave);font-size:.85rem}
.pie-marca img{height:24px;width:auto}
main{max-width:440px;margin:0 auto;padding:16px 16px max(24px,env(safe-area-inset-bottom))}
.caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;padding:22px;box-shadow:0 4px 18px rgba(16,30,39,.07)}
h1{font-family:'Anton','Impact','Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;font-size:1.9rem;margin:0 0 6px;color:var(--azul)}
h2{font-weight:800;color:var(--azul);font-size:1.15rem;margin:22px 0 4px}
.sub{color:var(--suave);margin:0 0 18px}
label{display:block;font-weight:700;margin:14px 0 6px}
input[type=text],input[type=tel],select{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--linea);border-radius:12px;background:#fff;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--marca);border-color:var(--marca)}
.fila{display:flex;gap:10px}.fila>*{flex:1}
.opcional{font-weight:400;color:var(--suave)}
.acepto{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;font-weight:400}
.acepto input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--marca)}
a{color:var(--marca-osc);font-weight:700}
button,.boton{display:block;width:100%;margin-top:18px;padding:14px 22px;border:0;border-radius:9999px;background:var(--marca);color:#fff;font:inherit;font-weight:800;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 4px 14px rgba(180,39,43,.35);transition:transform .15s,background .15s,box-shadow .15s}
button:hover,.boton:hover{background:var(--marca-osc);transform:translateY(-1px);box-shadow:0 8px 22px rgba(180,39,43,.45)}
button:active,.boton:active{transform:scale(.98)}
button:disabled{opacity:.55;box-shadow:none;transform:none}
.error{color:var(--error);margin:12px 0 0;min-height:1.2em}
.aviso-pie{color:var(--suave);font-size:.85rem;text-align:center;margin-top:16px}
.sellos{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}
.sello{aspect-ratio:1;border-radius:50%;border:2px dashed var(--linea);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--suave);position:relative}
.sello.lleno{background:var(--marca);border:2px solid var(--marca);color:#fff;box-shadow:0 3px 10px rgba(180,39,43,.35)}
.sello .meta{position:absolute;bottom:-9px;font-size:.62rem;background:var(--tarjeta);color:var(--marca-osc);padding:0 4px;border-radius:6px;white-space:nowrap}
.premio{background:#fdecec;border:1.5px solid var(--marca);border-radius:14px;padding:12px;margin:10px 0}
.lista{padding-left:20px;color:var(--suave);margin:6px 0 0}
.qr{text-align:center;margin-top:18px}
.qr img{width:210px;height:210px;max-width:70%;background:#fff}
.centro{text-align:center}