/* Blog di Obiettivo Bar — generato da esporta-wp.py, non modificare a mano */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('font/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('font/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('font/montserrat-700.woff2') format('woff2')}

/* ═══════════════════════════════════════════════════════════════════════
   TOKEN — design system Obiettivo Bar (claude.ai/design), in un posto solo.
   Tipografia: Montserrat ovunque, come il sito vero. I caratteri proposti
   dal design system (Oswald / Work Sans) erano sostituzioni dichiarate
   "da confermare" nel suo stesso readme: qui vince la misura sul sito.
   ═══════════════════════════════════════════════════════════════════════ */:root{
  --ink-900:#2B1E28; --ink-700:#4A3745; --ink-500:#6B5563; --ink-300:#A99AA5; --ink-100:#E4DCE0;
  --red-700:#A62523; --red-600:#C62F2E; --red-100:#F6DAD9;
  --cream-100:#F1EAD9; --cream-50:#FAF6EF; --white:#fff;

  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500);
  --surface-page:var(--cream-50); --surface-card:var(--white);
  --surface-sunken:var(--cream-100); --surface-dark:var(--ink-900);
  --accent:var(--red-600); --accent-hover:var(--red-700); --accent-soft:var(--red-100);
  --border-subtle:var(--ink-100);

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --container-max:1180px;

  --radius-sm:3px; --radius-md:6px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(43,30,40,.06),0 4px 12px rgba(43,30,40,.07);
  --shadow-card-hover:0 2px 4px rgba(43,30,40,.08),0 10px 24px rgba(43,30,40,.12);
  --shadow-popover:0 8px 24px rgba(43,30,40,.18);
  --ease:cubic-bezier(.4,0,.2,1); --t-fast:120ms; --t-base:180ms;

  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --testata:76px;
}
@media (max-width:900px){:root{ --testata:64px } }

/* ═══ reset ═══ */#main .ob-blog *,#main .ob-blog *::before,#main .ob-blog *::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--testata) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} }#main .ob-blog{font-family:var(--font);font-size:16px;line-height:1.55;
  color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}#main .ob-blog img{max-width:100%;height:auto;display:block}#main .ob-blog h1,#main .ob-blog h2,#main .ob-blog h3,#main .ob-blog p{margin:0}#main .ob-blog a{color:inherit;text-decoration:none}#main .ob-blog button,#main .ob-blog input,#main .ob-blog select,#main .ob-blog textarea{font:inherit}#main .ob-blog [hidden]{display:none!important}#main .ob-blog :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}#main .ob-blog .contenuto{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-6)}#main .ob-blog .salta{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:0 22px;min-height:48px;display:inline-flex;align-items:center;font-weight:700}#main .ob-blog .salta:focus{left:12px;top:12px}

/* ═══ bottoni — regola del design system: l'hover SCURISCE, mai schiarisce ═══ */#main .ob-blog .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:13px 26px;border:0;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;text-align:center;
  transition:background var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}#main .ob-blog .btn-primario{background:var(--accent);color:#fff}#main .ob-blog .btn-fantasma{background:transparent;color:var(--ink-900);border:1.5px solid var(--ink-900)}#main .ob-blog .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){#main .ob-blog .btn-primario:hover{background:var(--accent-hover)}#main .ob-blog .btn-fantasma:hover{background:var(--ink-100)}
}

/* ═══ apertura ═══ */#main .ob-blog .apertura{padding:var(--space-16) 0 var(--space-10)}
@media (max-width:640px){#main .ob-blog .apertura{padding:var(--space-10) 0 var(--space-8)} }#main .ob-blog .occhiello{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-5)}#main .ob-blog .occhiello::before{content:"";width:26px;height:3px;background:currentColor;display:block;flex:0 0 auto}#main .ob-blog .apertura h1{font-size:clamp(32px,5.1vw,60px)!important;line-height:1.07!important;font-weight:700!important;letter-spacing:-.015em!important;max-width:19ch;color:var(--text-primary)!important}#main .ob-blog .sottotesta{margin-top:var(--space-6);font-size:19px;line-height:1.6;
  color:var(--text-secondary);max-width:58ch}

/* ═══ filtri ═══ */#main .ob-blog .filtri{display:flex;flex-wrap:wrap;gap:var(--space-3);padding-bottom:var(--space-8)}#main .ob-blog .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border:1.5px solid var(--border-subtle);border-radius:var(--radius-pill);
  background:var(--surface-card);color:var(--text-secondary);
  font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}#main .ob-blog .chip-n{font-size:14px;font-weight:700;color:var(--text-muted)}#main .ob-blog .chip.attivo{background:var(--ink-900);border-color:var(--ink-900);color:#fff}#main .ob-blog .chip.attivo .chip-n{color:var(--ink-300)}#main .ob-blog .chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){#main .ob-blog .chip:hover{border-color:var(--ink-900)}#main .ob-blog .chip.attivo:hover{background:var(--ink-700);border-color:var(--ink-700)}
}

/* ═══ impianto: due terzi articoli a sinistra, un terzo CTA a destra ═══ */
/* la fascia porta il fondo, ed è larga quanto lo schermo: è lei che tiene
   nascosti i pezzi del logo finché il contenuto non è scorso via. Sul contenitore
   centrato non basterebbe, perché i suoi 24px di padding restano trasparenti. */#main .ob-blog .zona-elenco{position:relative;z-index:1;background:var(--surface-page)}#main .ob-blog .impianto{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-12);
  align-items:start;padding-bottom:var(--space-20)}
@media (max-width:1023px){#main .ob-blog .impianto{grid-template-columns:1fr;gap:0} }#main .ob-blog .colonna{min-width:0}#main .ob-blog .griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
@media (max-width:640px){#main .ob-blog .griglia{grid-template-columns:1fr;gap:var(--space-6)} }

/* ═══ scheda articolo ═══ */#main .ob-blog .scheda{position:relative;min-width:0;display:flex;flex-direction:column;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);overflow:hidden;
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}#main .ob-blog .scheda.fuori{display:none}#main .ob-blog .scheda-foto{position:relative;display:block;background:var(--surface-sunken)}
/* 1200/630 e' il formato delle copertine: con 16/10 venivano tagliate ai lati,
   e sulle nostre il taglio si mangia il titolo. Le foto degli articoli vecchi
   hanno rapporti vari e si ritagliano senza danno, perche' non contengono testo. */#main .ob-blog .scheda-foto img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
/* la tacca porta la categoria PER INTERO: è l'unico posto dove compare,
   così non si ripete nella riga di data (e il separatore non resta appeso a capo) */
/* La targhetta sta in alto A DESTRA: sulle nostre copertine e' l'unico angolo
   libero. In basso a sinistra c'e' il marchio OBIETTIVOBAR (che infatti copriva),
   in alto a sinistra il filo rosso e l'occhiello, in basso a destra l'indirizzo. */#main .ob-blog .tacca{position:absolute;right:0;top:0;max-width:calc(100% - 12px);
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:700;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:0 0 0 var(--radius-sm)}#main .ob-blog .scheda-testo{display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);flex:1 1 auto;min-width:0}#main .ob-blog .scheda-meta{font-size:14px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-muted)}#main .ob-blog .scheda-titolo{font-size:21px!important;line-height:1.25!important;font-weight:700!important;letter-spacing:-.01em!important;overflow-wrap:anywhere}#main .ob-blog .scheda-titolo a{color:var(--text-primary)!important}#main .ob-blog .scheda-titolo a::after{content:"";position:absolute;inset:0} /* tutta la scheda è il bersaglio */#main .ob-blog .scheda-estratto{font-size:16px;line-height:1.6;color:var(--text-secondary);
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}#main .ob-blog .scheda-invito{margin-top:auto;padding-top:var(--space-2);display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  transition:gap var(--t-base) var(--ease)}#main .ob-blog .scheda:active{transform:scale(.995)}
@media (hover:hover) and (pointer:fine){#main .ob-blog .scheda:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}#main .ob-blog .scheda:hover .scheda-invito{gap:15px}
}

/* la prima scheda in elenco è il pezzo forte: prende la colonna intera, foto a sinistra */
@media (min-width:641px){#main .ob-blog .scheda.primo{grid-column:1/-1;flex-direction:row;align-items:stretch}
  /* La copertina e' 1200x630: stirata a tutta l'altezza della card veniva
     ritagliata al centro e perdeva l'inizio del titolo e il marchio. Qui la
     fessura prende le proporzioni della copertina e si centra accanto al testo. */#main .ob-blog .scheda.primo .scheda-foto{flex:0 0 45%;max-width:45%;align-self:center;aspect-ratio:1200/630}#main .ob-blog .scheda.primo .scheda-foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}#main .ob-blog .scheda.primo .scheda-testo{padding:var(--space-8);justify-content:center;gap:var(--space-4)}#main .ob-blog .scheda.primo .scheda-titolo{font-size:28px!important;line-height:1.2!important}#main .ob-blog .scheda.primo .scheda-estratto{font-size:17px;-webkit-line-clamp:4;line-clamp:4}
}#main .ob-blog .ancora{display:flex;justify-content:center;padding-top:var(--space-10)}#main .ob-blog .fine-elenco{padding-top:var(--space-10);text-align:center;font-size:16px;color:var(--text-muted)}#main .ob-blog .fine-elenco a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--accent);font-weight:700}#main .ob-blog .fine-elenco a:focus-visible{outline-offset:0}

/* ═══ rail: la CTA che accompagna la lettura ═══ */#main .ob-blog .rail{position:sticky;top:calc(var(--testata) + var(--space-6));
  display:flex;flex-direction:column;gap:var(--space-5);min-width:0}#main .ob-blog .cartello{position:relative;overflow:hidden;background:var(--surface-dark);color:#fff;
  border-radius:var(--radius-md);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-10);
  display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-card)}#main .ob-blog .cartello::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent)}#main .ob-blog .cartello .occhiello{color:#fff;margin:0}#main .ob-blog .cartello .occhiello::before{background:var(--accent)}#main .ob-blog .cartello h2{font-size:26px!important;line-height:1.18!important;font-weight:700!important;letter-spacing:-.015em!important;color:#fff!important}#main .ob-blog .cartello p{font-size:16px;line-height:1.6;color:var(--cream-100)}#main .ob-blog .cartello .btn{width:100%}#main .ob-blog .postilla{font-size:14px;line-height:1.5;color:var(--ink-300)}#main .ob-blog .firme{display:flex;align-items:center;gap:12px;padding-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.5;color:var(--cream-100)}#main .ob-blog .firme img{width:40px;height:40px;flex:0 0 auto}#main .ob-blog .cartello-piccolo{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}#main .ob-blog .cartello-piccolo h3{font-size:17px!important;font-weight:700!important;line-height:1.3!important;color:var(--text-primary)!important}#main .ob-blog .cartello-piccolo p{font-size:15px;color:var(--text-secondary);line-height:1.55}#main .ob-blog .cartello-piccolo a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  transition:gap var(--t-base) var(--ease)}
@media (hover:hover) and (pointer:fine){#main .ob-blog .cartello-piccolo a:hover{gap:15px;color:var(--accent-hover)} }

/* la colonna di destra sparisce su telefono: su piccolo restano SOLO gli articoli.
   Questa riga va IN CODA al blocco, non in testa: `.rail` e `.rail` hanno la stessa
   specificità e la media query non ne aggiunge — vince l'ultima dichiarata. */
@media (max-width:1023px){#main .ob-blog .rail{display:none} }

/* Su questa pagina il richiamo in basso è UNO SOLO, ed è la call. La barra fissa
   del vecchio lead magnet (plugin sticky banner) verrebbe a litigarci sotto le dita:
   qui è nascosta. Non è disattivata: sulle altre pagine continua a funzionare, e
   la guida resta raggiungibile dal cartello nel rail e da quello in fondo all'elenco. */.hdsb-stickybanner{display:none!important}

/* Su telefono la colonna di destra sparisce, e con lei sparirebbe il lead magnet
   che oggi sul sito esiste: torna in fondo all'elenco articoli. Le tre righe qui
   sotto vanno lette in quest'ordine — stessa specificità, vince l'ultima. */#main .ob-blog .cartello-coda{display:none}
@media (max-width:1023px){#main .ob-blog .cartello-coda{display:flex;margin-top:var(--space-12)}
}

/* ═══ richiamo su telefono: compare scorrendo, si chiude sempre ═══ */#main .ob-blog .richiamo{display:none}
@media (max-width:1023px){#main .ob-blog .richiamo{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;
    background:var(--surface-dark);color:#fff;border-radius:var(--radius-md);
    box-shadow:var(--shadow-popover);
    padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);
    gap:var(--space-4);align-items:center;
    transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;
    transition:transform 320ms var(--ease),opacity 320ms var(--ease)}#main .ob-blog .richiamo.montato{display:flex}#main .ob-blog .richiamo.visibile{transform:translateY(0);opacity:1;pointer-events:auto}#main .ob-blog .richiamo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
    background:var(--accent);border-radius:var(--radius-md) 0 0 var(--radius-md)}#main .ob-blog .richiamo-testo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}#main .ob-blog .richiamo-occhiello{font-size:14px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent)}#main .ob-blog .richiamo-titolo{font-size:17px;font-weight:700;line-height:1.25;padding-right:44px}#main .ob-blog .richiamo-riga{font-size:14px;line-height:1.4;color:var(--cream-100)}#main .ob-blog .richiamo .btn{flex:0 0 auto;padding:12px 22px;font-size:14px}#main .ob-blog .richiamo-chiudi{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;
    background:transparent;color:var(--ink-300);cursor:pointer;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center}#main .ob-blog .richiamo-chiudi svg{width:18px;height:18px}
}
@media (max-width:620px){#main .ob-blog .richiamo{flex-direction:column;align-items:stretch;padding-right:var(--space-6)}#main .ob-blog .richiamo .btn{width:100%}
}

/* ═══ chiusura: il logo si rimonta un pezzo alla volta (pattern Linus) ═══ */#main .ob-blog .chiusura{height:170vh;margin-top:-55vh;position:relative;z-index:0}#main .ob-blog .palco-logo{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-8);
  background:var(--surface-page);overflow:clip}#main .ob-blog .palco-logo svg{width:min(300px,62vw);aspect-ratio:1/1;height:auto;overflow:visible}#main .ob-blog .pezzo{transform-box:fill-box;transform-origin:center}#main .ob-blog .gruppo-vola{opacity:0}          /* senza JS o con reduced-motion: logo GIÀ composto */#main .ob-blog .logo-vero{opacity:1}.js #main .ob-blog .anima .gruppo-vola{opacity:1}.js #main .ob-blog .anima .logo-vero{opacity:0}#main .ob-blog .firma-logo{font-size:clamp(21px,3.1vw,30px)!important;font-weight:700!important;color:var(--ink-900)!important;text-align:center;padding-inline:var(--space-6);letter-spacing:-.015em!important}#main .ob-blog .firma-logo em{font-style:normal;color:var(--accent)!important}.js #main .ob-blog .anima .firma-logo{opacity:0}

/* ═══ comparse ═══ */#main .ob-blog .rivela{opacity:0;transform:translateY(18px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}#main .ob-blog .rivela.dentro{opacity:1;transform:none}html:not(.js) #main .ob-blog .rivela{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#main .ob-blog .rivela{opacity:1;transform:none;transition:none}#main .ob-blog .btn,#main .ob-blog .chip,#main .ob-blog .scheda,#main .ob-blog .scheda-invito,#main .ob-blog .cartello-piccolo a,#main .ob-blog .menu a::after,#main .ob-blog .richiamo{transition:none}#main .ob-blog .btn:active,#main .ob-blog .chip:active,#main .ob-blog .scheda:active{transform:none}
}


/* ── messa a terra dentro Avada: solo su questa pagina ── */
/* l'id ripetuto (#main#main) vale il doppio in specificità: vince sul CSS dinamico
   di Avada che ha la stessa specificità semplice e viene dichiarato dopo il nostro
   foglio — stessa trappola dell'"ultima dichiarata vince", risolta senza !important */body.blog #main#main{padding-left:0;padding-right:0}