/* Robolero blog — mobile-first. Stessa identita' del sito (vedi site.css):
   nero, bianco, oro. Il tema resta scuro in ogni momento. Testo sopra l'oro: sempre --on-action
   (nero), mai #fff fisso: l'oro e' chiaro in entrambi i temi. */
:root{
  color-scheme:dark;
  /* nero, bianco, oro (16 settembre): come site.css. Rosso solo per --danger. */
  --bg:#000000;--bg2:#161616;--card:#0c0c0c;--line:#262626;--txt:#ffffff;--muted:#9c9890;
  --accent:#f2c56b;--accent2:#f7d58a;--purple:#f2c56b;--gold:#f2c56b;--danger:#ef7b7b;--radius:14px;
  --action:#f2c56b;--on-action:#0a0a0a;
  /* verde d'azione: stessi valori di site.css (--go-*), uguali nei due temi */
  --go-a:#3be08a;--go-b:#18a85a;--on-go:#04130c;--go-glow:rgba(44,214,130,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:880px;margin:0 auto;padding:0 18px}
img{max-width:100%;height:auto}

/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px;max-width:1100px;margin:0 auto;padding:0 18px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.5px;display:flex;align-items:center;color:var(--txt)}
.logo b{color:var(--accent)}
.dot{margin-right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.nav nav a{color:var(--muted);font-size:14px;margin-left:18px;font-weight:500}
.nav nav a:hover{color:var(--txt)}
.nav nav a.adv{background:var(--action);color:var(--on-action);padding:8px 14px;border-radius:999px;font-weight:700}
.nav nav a.adv:hover{color:var(--on-action);opacity:.9}
.nav nav a.lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;margin-left:14px;line-height:1}
.nav nav a.lang:hover{border-color:var(--accent)}
@media(max-width:680px){.nav nav a:not(.adv):not(.lang){display:none}}

/* article */
main.article{max-width:760px;margin:0 auto;padding:24px 18px 60px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--accent)}
article h1{font-size:clamp(27px,5.5vw,40px);line-height:1.12;letter-spacing:-1px;margin:6px 0 18px;font-weight:800}
article h2{font-size:clamp(21px,4vw,28px);letter-spacing:-.4px;margin:34px 0 12px;font-weight:700}
article h3{font-size:19px;margin:24px 0 8px;font-weight:700}
article p{margin:0 0 16px;font-size:17px}
article ul,article ol{margin:0 0 18px;padding-left:22px}
article li{margin:7px 0;font-size:17px}
article strong{color:var(--txt);font-weight:700}
article a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
article hr{border:none;border-top:1px solid var(--line);margin:30px 0}
blockquote{background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 18px;margin:0 0 20px;font-size:16px;color:var(--txt)}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:0 0 22px}
table{width:100%;border-collapse:collapse;min-width:420px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:var(--bg2);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--txt) 3%,transparent)}

/* share */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:30px 0;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.share span{font-size:14px;color:var(--muted);font-weight:600}
.share a{font-size:13px;font-weight:700;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--txt)}
.share a:hover{border-color:var(--accent);color:var(--accent)}

/* cta */
.cta{text-align:center;background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid var(--accent);border-radius:18px;padding:30px 22px;margin:36px 0}
.cta h3{font-size:23px;margin-bottom:8px;letter-spacing:-.4px}
.cta p{color:var(--muted);font-size:16px;max-width:480px;margin:0 auto 18px}
/* tasto pieno = azione primaria = VERDE, come in site.css (decisione del titolare, 19/09 sera);
   l'oro resta a informazione e link. Testo #04130c sul verde: 6,2:1 nell'estremo scuro (AA). */
.btn{display:inline-block;background:linear-gradient(135deg,var(--go-a),var(--go-b));color:var(--on-go);font-weight:700;padding:13px 24px;border-radius:999px;font-size:16px;margin:5px;box-shadow:0 10px 34px var(--go-glow);border:0;font-family:inherit;cursor:pointer}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);box-shadow:none;filter:none}
/* pulsazione: uno solo alla volta (motion.js da' .pulsa-on al piu' in alto fra i visibili) */
.btn.pulsa{position:relative;animation:btnPulse 2.4s ease-in-out infinite}
.btn.pulsa::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;box-shadow:0 0 0 0 rgba(59,224,138,0);animation:btnAnello 2.4s ease-out infinite}
html.js .btn.pulsa:not(.pulsa-on),html.js .btn.pulsa:not(.pulsa-on)::after{animation:none}
@keyframes btnPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.035)}}
/* l'anello si allarga di 16px uniformi (box-shadow), non in scala: su una pillola larga la scala
   sbordava sul tasto accanto e nel chiaro il bordo scuro sembrava un difetto */
@keyframes btnAnello{0%{box-shadow:0 0 0 0 rgba(59,224,138,.6)}70%,100%{box-shadow:0 0 0 16px rgba(59,224,138,0)}}
@media(prefers-reduced-motion:reduce){.btn.pulsa,.btn.pulsa::after{animation:none!important}.btn:hover{transform:none}}

/* related */
.related{margin-top:40px}
.related h3{font-size:20px;margin-bottom:14px}
.rgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.rgrid{grid-template-columns:repeat(3,1fr)}}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:block}
.rcard:hover{border-color:var(--accent2);transform:translateY(-2px)}
.rcard b{display:block;font-size:15px;color:var(--txt);line-height:1.35;margin-top:8px}

/* funnel tags */
.rtag{font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:999px}
.rtag.TOFU{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.rtag.MOFU{background:color-mix(in srgb,var(--txt) 10%,transparent);color:var(--txt)}
.rtag.BOFU{background:var(--txt);color:var(--bg)}

/* blog index */
.blogindex{padding:30px 18px 60px}
.bhero{text-align:center;padding:30px 0 36px}
.badge{display:inline-block;font-size:12px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:999px;padding:6px 14px;margin-bottom:18px;font-weight:700;letter-spacing:.4px}
.bhero h1{font-size:clamp(28px,6vw,44px);letter-spacing:-1.2px;font-weight:800;line-height:1.08;margin-bottom:14px}
.bhero p{color:var(--muted);font-size:18px;max-width:560px;margin:0 auto}
.gh{font-size:21px;margin:34px 0 16px;letter-spacing:-.3px}
.bgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.bgrid{grid-template-columns:repeat(3,1fr)}}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px}
.bcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.bcard b{font-size:17px;color:var(--txt);line-height:1.3}
.bcard p{font-size:13.5px;color:var(--muted);flex:1}
.bcard .more{font-size:13px;color:var(--accent);font-weight:700}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 18px;text-align:center;color:var(--muted);font-size:13px}
.fine{font-size:11px;opacity:.8}
footer .flinks{display:inline-block;margin-top:10px;font-size:12px}
footer .flinks a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bcard,.rcard,.btn{transition:.16s}


/* ---- tipografia condivisa col sito (vedi site.css) ---- */
body{font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4,.logo{font-family:"Bricolage Grotesque","IBM Plex Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;letter-spacing:-.6px}
h1,h2,h3{text-wrap:balance}
article p,.post p{max-width:68ch}
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}}

/* emblema-visiera nel menu del blog */
.logo .mark{width:26px;height:28px;margin-right:8px;display:inline-block}
.logo .mark svg{width:100%;height:100%;display:block}

/* ---- agente «tema», 19/09/2026: la scritta ROBOLERO nell'header del blog. Il markup (build-blog.js)
   ha le tre O come <i class="o"> disegnate in CSS, ma qui mancavano le regole di site.css e si leggeva
   «RBLER». Stesse misure del sito; la visiera d'oro e' fissa (#f2c56b) in entrambi i temi. ---- */
.logo{gap:10px;font-size:19px;letter-spacing:.07em;text-transform:uppercase;line-height:1;font-weight:800}
.logo .mark{margin-right:0;width:30px;height:30px;color:var(--txt);flex:0 0 auto}
.logo .mark svg{overflow:visible}
.logo .mark .mbar{filter:drop-shadow(0 0 3px rgba(242,197,107,.75))}
.logo .word{display:inline-flex;align-items:center;white-space:nowrap;font-weight:800}
.logo .o{display:inline-block;width:.74em;height:.74em;border:.115em solid currentColor;border-radius:50%;position:relative;margin:0 .11em 0 .04em;vertical-align:-.05em;flex:0 0 auto}
.logo .o::after{content:"";position:absolute;left:17%;right:17%;top:36%;height:.17em;border-radius:99px;background:#f2c56b}
footer .logo{display:inline-flex;vertical-align:middle;font-size:15px}
footer .logo .mark{width:24px;height:24px}
@media(max-width:700px){.logo{font-size:16px;letter-spacing:.06em;gap:8px}.logo .mark{width:26px;height:26px}}
/* header del blog sotto i 520px: logo, tasto, lingua e tema su UNA riga (con il tasto tema la lingua
   andava a capo sotto il tasto e usciva dai 58px dell'header). Stesse misure del sito (site.css) */
@media(max-width:520px){
  .nav{padding:0 14px}
  .nav nav{display:flex;align-items:center;flex-wrap:nowrap;min-width:0}
  .logo{font-size:14px;letter-spacing:.05em;gap:7px}
  .logo .mark{width:24px;height:24px}
  .nav nav a.adv{font-size:11.5px;padding:7px 10px;margin-left:8px;white-space:nowrap}
  .lingue{margin-left:6px}
  .lingue-btn{padding:6px 7px;gap:4px}
}
@media(max-width:400px){
  .logo{font-size:13px;letter-spacing:.04em;gap:6px}
  .nav nav a.adv{font-size:11px;padding:7px 8px;margin-left:6px}
  .lingue{margin-left:4px;gap:4px}
  .lingue-btn{padding:6px 6px;gap:3px}
  .lingue-btn::after{width:5px;height:5px}
}