/* Brand con gli omini · fogli di stile condivisi (bozza 15/11/2026)
   Base del sito (bianco, quasi nero, blu delle azioni) + accenti di Reels Ometto Lab
   (giallo, arancio, ciano, crema). Colori pieni e piatti, niente sfumature. */
:root{
  /* base del sito */
  --bg:#FFFFFF; --ink:#111111; --muted:#5A6470; --line:#E6E8EB;
  --blue:#1E9BE0; --blue-ink:#127BB5; --blue-soft:#EAF5FC;
  /* accenti Reels Ometto Lab */
  --yellow:#FFD103; --amber:#FE9E03; --amber-ink:#A85A00; --cyan:#20C6F2; --cream:#FFF6DF;
  /* fondi delle finestre degli omini (versioni chiare) */
  --win-cyan:#DDF5FD; --win-cream:#FFF6DF; --win-blue:#EAF5FC; --win-yellow:#FFF1B8;
  /* colori di prodotto: solo dove si parla di quella macchina */
  --orange:#F26A35; --orange-soft:#FEF0EA; --green:#1E9E57; --green-soft:#E8F5EE;
  --b:3px solid var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Cabin',system-ui,sans-serif;font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,h3,.btn,.pill,.kick{font-family:'Inter Tight',system-ui,sans-serif}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.col{max-width:700px;margin:0 auto}

/* etichette */
.kick{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.pill{display:inline-block;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px}
.pill.cy{background:var(--cyan)}
.hl{background:linear-gradient(transparent 62%,var(--yellow) 62%)}

/* pulsanti: blu del sito con il bordo e l'ombra "sticker" di Ometto Lab */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;text-decoration:none;background:var(--blue);color:#fff;font-weight:800;font-size:1.02rem;letter-spacing:.02em;border:var(--b);border-radius:999px;padding:.95em 1.8em;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--ink);background:var(--blue-ink)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* la finestra dell'ometto: fondo chiaro pieno, bordo nero, ombra piena */
.win{position:relative;border:var(--b);border-radius:20px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-top:16px}
.win img{width:auto;max-width:92%;position:relative;z-index:1}
.win.cy{background:var(--win-cyan)}.win.cr{background:var(--win-cream)}.win.bl{background:var(--win-blue)}.win.ye{background:var(--win-yellow)}
.win.dk{background:var(--ink)}
.win.or{background:var(--orange-soft)}.win.gr{background:var(--green-soft)}

/* fumetti ed etichette dentro le finestre */
.bub{position:absolute;z-index:2;background:#fff;border:var(--b);border-radius:18px;padding:7px 12px;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:.84rem;line-height:1.25;box-shadow:3px 3px 0 var(--ink);max-width:160px}
.bub:after{content:"";position:absolute;left:14px;bottom:-11px;width:15px;height:15px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.chip{position:absolute;z-index:2;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:.76rem;padding:4px 11px;border-radius:999px;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:var(--yellow);color:var(--ink)}
.chip.cy{background:var(--cyan)}.chip.bl{background:var(--blue);color:#fff}.chip.am{background:var(--amber)}

/* card e tessere */
.tile{border:var(--b);border-radius:18px;background:#fff;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.tile .win{border:0;border-bottom:var(--b);border-radius:0;box-shadow:none}
.tile .tx{padding:18px 20px 22px}
.tile h3{font-size:1.2rem;margin-bottom:6px}
.tile p{font-size:.95rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:640px){body{font-size:17.5px}.win{box-shadow:5px 5px 0 var(--ink)}.tile{box-shadow:4px 4px 0 var(--ink)}}