:root{--bg:#f6ecd2;--paper:#fffaf0;--ink:#161616;--soft:#4f4a40;--rule:#16161638;--accent:#d93a2b;--yel:#ffcf2e;--good:#2f7d4f;
 --hand:"Luckiest Guy",Impact,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0 auto;max-width:680px;padding:18px 16px 56px;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg)}
a{color:var(--accent);font-weight:600}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{width:40px;height:40px;transform:rotate(-7deg);filter:drop-shadow(3px 3px 0 var(--ink));flex:none}
.logo .brand{display:flex;flex-direction:column;font-family:var(--hand);font-weight:400;font-size:1.55rem;line-height:.95;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);-webkit-text-stroke:1.4px var(--ink);paint-order:stroke fill}
.logo .brand small{align-self:flex-start;margin-top:5px;padding:3px 8px 1px;background:var(--yel);color:var(--ink);border:2px solid var(--ink);border-radius:6px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-2.5deg);font-size:.72rem;-webkit-text-stroke:0;letter-spacing:.3px}
.back{display:inline-block;padding:7px 12px;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
main.sheet{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);padding:26px 20px 22px;margin-top:10px}
main.sheet>h1:first-child{position:absolute;top:-17px;left:14px;margin:0;background:var(--ink);color:var(--yel);font-family:var(--hand);font-weight:400;font-size:1.05rem;letter-spacing:.8px;text-transform:uppercase;padding:6px 12px 3px;border-radius:7px;transform:rotate(-2deg);line-height:1.1;max-width:calc(100% - 28px)}
h2{font-family:var(--hand);font-weight:400;font-size:1.15rem;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);margin:1.6em 0 .4em;line-height:1.15}
main.sheet>h1:first-child+h2,main.sheet>h1:first-child+p{margin-top:.6em}
ul{padding-left:1.2em}li{margin:.35em 0}
b,strong{font-weight:700}
.card{background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:14px 16px;margin-top:16px}
.mail{font-size:1.2rem;font-weight:800;word-break:break-all}
label{display:block;font-weight:700;margin:12px 0 4px}
select,input,textarea{width:100%;font:inherit;padding:10px 12px;border:2.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink)}
textarea{min-height:140px;resize:vertical}
button{margin-top:14px;font:inherit;font-family:var(--hand);font-weight:400;font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;padding:11px 18px 8px;border:2.5px solid var(--ink);border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
form button{width:100%}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.small{font-size:.88rem;color:var(--soft)}
.ok{color:var(--good);font-weight:700}
.pie{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.pie a{padding:6px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:700}
.pie a.on{background:var(--ink);color:var(--yel)}
@media (max-width:420px){.logo .brand{font-size:1.25rem}.logo svg{width:32px;height:32px}.back{font-size:.82rem;padding:6px 10px}}

/* Páginas de entrada (landing) */
.landing .lead{font-size:1.08rem}
.landing h1{font-family:var(--hand);font-weight:400;font-size:1.9rem;line-height:1.08;letter-spacing:.3px;margin:.2em 0 .5em}
.landing h2{font-family:var(--hand);font-weight:400;font-size:1.25rem;letter-spacing:.3px;color:var(--accent);margin:1.4em 0 .4em}
.landing .shot{margin:16px 0 8px;text-align:center}
.landing .shot img{max-width:100%;height:auto;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);background:var(--paper)}
.landing .ctawrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:18px 0}
.landing .cta{display:inline-block;padding:14px 26px;background:var(--accent);color:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);font-family:var(--hand);font-weight:400;font-size:1.25rem;letter-spacing:.5px;text-decoration:none;text-transform:uppercase}
.landing .cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.landing .ctasub{font-size:.88rem;color:var(--soft);text-align:center}
.landing .faq details{border-bottom:1px solid var(--rule);padding:10px 0}
.landing .faq summary{cursor:pointer;font-weight:700}
.landing .faq p{margin:8px 0 2px}
.landing .rel{padding-left:1.2em}.landing .rel li{margin:6px 0}
.landing .foot{max-width:680px;margin:28px auto 0;text-align:center;font-size:.85rem;color:var(--soft)}
@media (prefers-color-scheme: dark){:root:has(body.landing){--bg:#1f1d1a;--paper:#2a2723;--ink:#ede3cc;--soft:#b9ae98;--rule:#ede3cc33}.landing .cta{color:#fff;border-color:#1d1b18}}
body.landing main.sheet>h1:first-child{position:static;background:none;color:var(--ink);font-size:1.7rem;text-transform:none;letter-spacing:.3px;padding:0;border-radius:0;transform:none;max-width:none;margin:0 0 .5em;line-height:1.1}
.landing .logo .brand small{color:#161616}
/* cabecera igual que la del juego */
.logo svg{width:31px!important;height:31px!important}
.logo .brand{font-size:1.18rem!important;-webkit-text-stroke:1.1px var(--ink)!important}
.logo .brand small{font-size:.62rem!important}