/* Pagina bio 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: il design system di Obiettivo Bar, copiato dal foglio del blog in produzione ═══ */: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;
  --colonna:560px;
  --radius-sm:3px; --radius-md:6px;
  --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);
  --ease:cubic-bezier(.4,0,.2,1); --t-fast:120ms; --t-base:180ms;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ═══ reset ═══ */#main .obbio *,#main .obbio *::before,#main .obbio *::after{box-sizing:border-box}#main .obbio{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;
  color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column}#main .obbio img{max-width:100%;height:auto;display:block}#main .obbio h1,#main .obbio h2,#main .obbio p,#main .obbio ul{margin:0}#main .obbio ul{padding:0;list-style:none}#main .obbio a{color:inherit;text-decoration:none}#main .obbio button,#main .obbio input,#main .obbio select,#main .obbio textarea{font:inherit}#main .obbio [hidden]{display:none!important}#main .obbio :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}#main .obbio .testata :focus-visible,#main .obbio .piede :focus-visible{outline-color:var(--cream-50)}#main .obbio .contenuto{width:100%;max-width:var(--colonna);margin-inline:auto;padding-inline:var(--space-5)}#main .obbio .salta{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff!important;padding:0 22px;min-height:48px;display:inline-flex;align-items:center;font-weight:700!important}#main .obbio .salta:focus{left:12px;top:12px}

/* ═══ testata scura, come sul blog: il marchio a sinistra, una via al sito a destra ═══ */#main .obbio .testata{background:var(--surface-dark);color:#fff}#main .obbio .testata-riga{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:76px;
  padding-top:var(--space-3);padding-bottom:var(--space-3)}#main .obbio .marchio{display:inline-flex;align-items:center;min-height:48px;flex:0 0 auto}#main .obbio .marchio img{height:56px;width:56px}#main .obbio .vai-sito{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--space-3);color:#fff!important;font-size:14px!important;font-weight:600!important;letter-spacing:.07em!important;text-transform:uppercase!important;white-space:nowrap;border-radius:var(--radius-sm);position:relative}#main .obbio .vai-sito::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:8px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
@media (hover:hover) and (pointer:fine){#main .obbio .vai-sito:hover::after{transform:scaleX(1)} }

/* ═══ apertura: occhiello col trattino rosso, titolo in minuscolo col punto ═══ */#main .obbio .obbio-corpo{flex:1 0 auto}#main .obbio .apertura{padding-top:var(--space-10);padding-bottom:var(--space-6)}#main .obbio .occhiello{display:flex;align-items:center;gap:var(--space-3);font-size:14px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--accent)!important}#main .obbio .occhiello::before{content:"";width:36px;height:3px;background:var(--accent);flex:0 0 auto;transform-origin:left;transform:scaleX(1)}.js #main .obbio .occhiello::before{transform:scaleX(0);animation:trattino var(--t-base) var(--ease) 120ms forwards}
@keyframes trattino{to{transform:scaleX(1)}}#main .obbio .apertura h1{font-size:clamp(28px,7vw,36px)!important;line-height:1.12!important;font-weight:700!important;letter-spacing:-.015em!important;margin-top:var(--space-4)}#main .obbio .sottotitolo{margin-top:var(--space-4);font-size:17px!important;line-height:1.55!important;color:var(--text-secondary)!important}

/* ═══ i tasti: uno solo in evidenza, gli altri bianchi. L'hover SCURISCE ═══ */#main .obbio .tasti{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-12)}#main .obbio .tasto{display:flex;align-items:center;gap:var(--space-4);min-height:72px;padding:var(--space-4) var(--space-5);background:var(--surface-card);color:var(--text-primary)!important;border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}#main .obbio .tasto-icona{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)!important}#main .obbio .tasto-testo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}#main .obbio .tasto-nome{font-size:16px!important;font-weight:700!important;letter-spacing:.05em!important;text-transform:uppercase!important;line-height:1.25!important}#main .obbio .tasto-riga{font-size:14px!important;line-height:1.45!important;color:var(--text-secondary)!important}#main .obbio .tasto-bollo{font-size:14px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;line-height:1.2!important;color:var(--cream-100)!important;margin-bottom:4px}#main .obbio .tasto-freccia{flex:0 0 auto;color:var(--ink-500)!important;transition:transform var(--t-base) var(--ease)}#main .obbio .tasto:active{transform:scale(.97)}#main .obbio .tasto.premuto,#main .obbio .tasto:active{background:var(--surface-sunken)}
@media (hover:hover) and (pointer:fine){#main .obbio .tasto:hover{background:var(--surface-sunken);box-shadow:var(--shadow-card-hover)}#main .obbio .tasto:hover .tasto-freccia{transform:translateX(4px)}
}
/* il tasto in evidenza: rosso pieno, come il bottone primario del blog */#main .obbio .tasto.evidenza{background:var(--accent);color:#fff!important;border-color:var(--accent)}#main .obbio .tasto.evidenza .tasto-icona{background:rgba(255,255,255,.16);color:#fff!important}#main .obbio .tasto.evidenza .tasto-riga,#main .obbio .tasto.evidenza .tasto-freccia{color:#fff!important}#main .obbio .tasto.evidenza.premuto,#main .obbio .tasto.evidenza:active{background:var(--accent-hover)}
@media (hover:hover) and (pointer:fine){#main .obbio .tasto.evidenza:hover{background:var(--accent-hover)} }

/* ═══ piede scuro ═══ */#main .obbio .piede{background:var(--surface-dark);color:var(--white);padding-top:var(--space-8);padding-bottom:var(--space-8)}#main .obbio .piede-riga{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}#main .obbio .piede-riga img.marchio-piede{width:48px;height:48px}#main .obbio .piede-dati{font-size:14px!important;color:var(--cream-100)!important}#main .obbio .piede-link{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-left:-10px}#main .obbio .piede-link a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--cream-100)!important;font-size:14px!important}#main .obbio .piede-link a:hover{color:#fff!important;text-decoration:underline}#main .obbio .social{display:flex;gap:var(--space-2);margin-left:auto}#main .obbio .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);transition:background var(--t-base) var(--ease)}#main .obbio .social a:hover{background:rgba(255,255,255,.12)}

/* ═══ la comparsa: i tasti entrano uno dopo l'altro. Solo transform e opacity ═══ */.js #main .obbio .rivela{opacity:0;transform:translateY(12px);
  animation:rivela 320ms var(--ease) forwards;animation-delay:calc(160ms + var(--i,0) * 70ms)}
@keyframes rivela{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){.js #main .obbio .rivela{animation:none;opacity:1;transform:none}.js #main .obbio .occhiello::before{animation:none;transform:scaleX(1)}#main .obbio .tasto,#main .obbio .tasto-freccia,#main .obbio .vai-sito::after,#main .obbio .social a{transition:none}#main .obbio .tasto:active{transform:none}
}


/* ── messa a terra dentro Avada: vale SOLO sulla pagina bio ── */
/* l'id ripetuto vale il doppio in specificità: vince sul CSS dinamico di Avada */
body.page-bio #main#main{padding:0}
body.page-bio #main .obbio a{text-decoration:none;box-shadow:none}

/* `.fusion-row` è display:flex, e un elemento flex ha min-width:auto: il recinto
   non si stringe sotto la propria larghezza minima e il contenuto esce TAGLIATO
   senza traboccare (misurato su questo sito: 1120px dentro un telefono da 390). */
body.page-bio #main .obbio{min-width:0;width:100%;max-width:100%;min-height:100vh}
body.page-bio #main .fusion-row{max-width:none;margin-left:0;margin-right:0}

/* La barra del titolo di Avada: una pagina creata via REST la porta (opzione di
   pagina), e il caricatore la spegne col filtro del tema. Rete di sicurezza. */
body.page-bio .fusion-page-title-bar,
body.page-bio .fusion-tb-page-title-bar{display:none}

/* La sticky banner del sito («Scarica la guida») è una SESTA porta in fondo allo
   schermo, non decisa da Francesco fra i cinque tasti: si spegne per contesto,
   solo qui, senza toccare il plugin. Il «torna in cima» di Avada su una pagina
   di una schermata non serve, e sta dove sta il dito. Il banner del consenso
   NON si tocca: è materia legale. */
body.page-bio .hdsb-stickybanner,
body.page-bio .fusion-top-top-link{display:none!important}

/* IL COLORE DEI TESTI SI DICHIARA, MAI EREDITATO: Avada scrive h1..h6{color:…}
   su selettori d'ELEMENTO e su questo sito quel colore è BIANCO. Solo i titoli. */
body.page-bio #main .obbio h1,
body.page-bio #main .obbio h2,
body.page-bio #main .obbio h3{color:inherit!important}

/* IL CARATTERE SI DICHIARA SU OGNI TESTO DEL RECINTO (Georgia e Capitalize nel
   finto ospite di testimonianze, 3/09): quello che coincide col tema per caso
   non è configurato. */
body.page-bio #main .obbio,
body.page-bio #main .obbio *{font-family:var(--font)!important}
body.page-bio #main .obbio h1{text-transform:none!important}

/* IL TEMA DISEGNA UN SUO TRATTINO SOTTO OGNI h1: h1::before e h1::after con
   background #D83333, 50×2px (misurato sul sito vero il 3/09/2026 con
   getComputedStyle sui pseudo-elementi). Sotto il nostro occhiello usciva un
   secondo trattino rosso. Si spengono i pseudo-elementi del tema sul solo h1
   del recinto: il trattino nostro sta sull'occhiello, non sul titolo. */
body.page-bio #main .obbio h1::before,
body.page-bio #main .obbio h1::after{content:none!important;display:none!important}