/* ============================================================
 * TradingOnline 2026 — SHARED design system (mockup)
 * Tokens + header + footer + marks + tooltip. Used by all pages.
 * ============================================================ */
:root{
  --paper:#FDFDFD;--paper-2:#F7F7F8;--card:#FFFFFF;
  --ink:#15121C;--ink-2:#3c3747;--muted:#6E6A78;
  --line:#ECEBF0;--line-2:#E0DEE8;
  --violet:#4907D9;--violet-700:#3a05ad;--violet-tint:#F1ECFE;
  --green:#04BE68;--green-700:#039553;--green-tint:#E7F8EF;
  --up:#0E9E5B;--down:#D5453F;
  --shadow-xs:0 1px 2px rgba(21,18,28,.05);
  --shadow-sm:0 1px 2px rgba(21,18,28,.05),0 8px 18px -12px rgba(21,18,28,.22);
  --shadow-md:0 2px 4px rgba(21,18,28,.05),0 16px 38px -16px rgba(21,18,28,.26);
  --shadow-lg:0 6px 12px rgba(21,18,28,.07),0 30px 60px -22px rgba(21,18,28,.32);
  --r:10px;--r-lg:16px;
  --disp:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:clip}
body{background:linear-gradient(180deg,var(--paper),var(--paper-2));color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:clip}
.wrap{max-width:1220px;margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}

.mk{width:38px;height:38px;border-radius:9px;display:block;box-shadow:0 6px 16px -8px rgba(73,7,217,.6)}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .wm{font-family:var(--disp);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);line-height:1}
.brand .wm b{font-weight:900;color:var(--violet)}
.brand .wm sup{font-size:.42em;font-weight:700;color:var(--muted);vertical-align:super;margin-left:1px}
.seal{width:1em;height:1em;display:inline-block;vertical-align:-0.15em}
/* role badges site-wide: director = red "presidenziale", Galella = azure */
.seal--pres{color:#C8102E}
.seal--blue{color:#1d9bf0}
/* Editorial label (de-AI): Fraunces, sentence case, slim vertical hairline — no mono, no all-caps tracking */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-style:normal;font-weight:600;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--violet);margin:0 0 12px}
.eyebrow::before{content:"";width:3px;height:1.05em;border-radius:2px;background:currentColor;flex:0 0 auto}

/* tooltip (position:fixed via JS) */
.tip{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.tip .q{width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);font-size:.62rem;font-weight:800;display:grid;place-items:center;cursor:help;margin-left:6px;background:#fff}
.tip .pop{position:fixed;left:0;top:0;width:260px;max-width:78vw;background:var(--ink);color:#e9e6f2;font-size:.72rem;line-height:1.5;font-weight:400;padding:11px 13px;border-radius:9px;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;z-index:9999;box-shadow:var(--shadow-lg);text-align:left;pointer-events:none}
.tip.open .pop,.tip:focus-within .pop{opacity:1;visibility:visible;pointer-events:auto}
.tip .pop b{color:#fff}.tip .pop a{color:#b9a3ff}

.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff3b30;margin-right:7px;box-shadow:0 0 0 0 rgba(255,59,48,.5);animation:pl 1.8s infinite;vertical-align:middle}
.livedot.sm{width:7px;height:7px;margin-right:5px}
@keyframes pl{70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* ticker */
.ticker{background:var(--ink);color:#e9e6f2;overflow:hidden}
.ticker .row{display:flex;gap:32px;padding:9px 0;white-space:nowrap;animation:scroll 38s linear infinite;width:max-content}
@keyframes scroll{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:8px;font-size:.78rem}
.tk .s{font-weight:700}.tk .p{font-family:var(--mono);color:#cfc9dc}.tk .c{font-family:var(--mono);font-weight:700}
.tk.up .c{color:#4be08f}.tk.down .c{color:#ff7d78}

/* header */
.site-header{position:sticky;top:0;z-index:50;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.site-header.hide{transform:translateY(-100%)}
.topbar{border-bottom:1px solid var(--line);background:rgba(252,252,251,.85);backdrop-filter:blur(8px)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;font-size:.73rem;color:var(--muted)}
.topbar .l{display:flex;align-items:center;gap:14px}
.topbar .since b{color:var(--ink-2);font-weight:700}
.topbar .vfd{color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:help;border-bottom:1px dotted transparent;padding-bottom:1px}
.topbar .vfd .seal{color:var(--green-700);opacity:.9}
.topbar .vfd:hover{border-bottom-color:var(--line-2)}
.topbar .tb-mkt{font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--ink-2)}
.topbar .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.topbar .r{display:flex;align-items:center;gap:14px}
.topbar .clock{font-family:var(--mono);color:var(--ink-2);font-size:.72rem}
.topbar .soc{display:flex;gap:8px}
.topbar .soc a{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;font-size:.62rem;font-weight:700}
.topbar .soc a:hover{color:var(--violet);border-color:var(--violet)}
.topbar .soc a[data-soc=facebook]:hover{background:#1877F2;color:#fff;border-color:transparent}
.topbar .soc a[data-soc=x]:hover,.topbar .soc a[data-soc=twitter]:hover{background:#000;color:#fff;border-color:transparent}
.topbar .soc a[data-soc=instagram]:hover{background:radial-gradient(circle at 30% 107%,#fdf497,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff;border-color:transparent}
.topbar .soc a[data-soc=linkedin]:hover{background:#0A66C2;color:#fff;border-color:transparent}
.topbar .soc a[data-soc=youtube]:hover{background:#FF0000;color:#fff;border-color:transparent}
.topbar .soc a[data-soc=tiktok]:hover{background:#000;color:#69C9D0;border-color:transparent}
.topbar .soc a[data-soc=telegram]:hover{background:#229ED9;color:#fff;border-color:transparent}
.masthead{background:#fff;border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px}
.nav{display:flex;gap:24px;font-size:.86rem;font-weight:600}
.nav a{position:relative;padding:4px 0;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--violet);transition:right .25s}
.nav a:hover::after{right:0}
.nav a.is-news{color:var(--violet);font-weight:700}
.cta{font-weight:700;font-size:.84rem;color:#fff;background:var(--violet);padding:10px 18px;border-radius:9px;box-shadow:0 10px 22px -10px rgba(73,7,217,.7);transition:.2s;white-space:nowrap}
.cta:hover{transform:translateY(-2px);background:var(--violet-700)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.mnav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:#fff;z-index:70;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;padding:22px;overflow-y:auto}
.mnav.open{transform:translateX(0)}
.mnav .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mnav .close{width:38px;height:38px;border:1px solid var(--line-2);border-radius:9px;background:#fff;font-size:1.2rem;cursor:pointer;color:var(--ink)}
.mnav a.ml{display:flex;align-items:center;justify-content:space-between;padding:15px 6px;border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:600;font-size:1.15rem;color:var(--ink)}
.mnav a.ml .ar{color:var(--violet)}
.mnav .mcta{margin-top:20px;text-align:center}
.mnav .mmeta{margin-top:18px;font-size:.74rem;color:var(--muted);font-family:var(--mono)}
.scrim{position:fixed;inset:0;background:rgba(21,18,28,.5);z-index:65;opacity:0;visibility:hidden;transition:.3s}
.scrim.open{opacity:1;visibility:visible}

/* section heads */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 22px}
.sec-head h2{font-family:var(--disp);font-weight:600;font-size:1.85rem;letter-spacing:-.01em;line-height:1.05}
.sec-head .more{font-size:.8rem;font-weight:700;color:var(--violet);white-space:nowrap}
/* Section rule (de-AI): drop the "N.0x" mono index; Fraunces label + hairline accent */
.sec-rule{display:flex;align-items:center;gap:12px;margin:0 0 24px;flex-wrap:nowrap}
.sec-rule .idx{display:none}
.sec-rule .lbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-style:normal;font-weight:600;font-size:1.18rem;letter-spacing:-.01em;color:var(--ink);min-width:0;white-space:nowrap}
.sec-rule .lbl::before{content:"";width:3px;height:1.05em;border-radius:2px;background:var(--violet);flex:0 0 auto}
.sec-rule .line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* breadcrumb */
/* Safety globale anti-overflow orizzontale: nessun elemento/carosello esce mai dallo schermo.
   overflow:clip (non hidden) → non crea scroll-container, non rompe position:sticky/fixed. */
html,body{max-width:100%}
body{overflow-x:clip}
img,iframe,video,table{max-width:100%}
.crumb{font-size:.76rem;color:var(--muted);display:flex;gap:8px;flex-wrap:nowrap;align-items:center;padding:18px 0;overflow:hidden}
.crumb>*{flex:0 0 auto;white-space:nowrap;min-width:0}
.crumb>:last-child{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} /* titolo lungo: ellissi, sempre 1 riga */
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--violet)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink-2);font-weight:600}

/* article cards (shared) */
.card .ph{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#211d2e,#3a3450)}
.card .pill{position:absolute;top:11px;left:11px;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(10,6,24,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);padding:4px 9px;border-radius:5px}
.card h3{font-family:var(--disp);font-weight:600;font-size:1.1rem;line-height:1.18;margin:13px 0 7px}
.card:hover h3{color:var(--violet-700)}
.card p{font-size:.8rem;color:var(--muted);line-height:1.5}
.card .meta{margin-top:10px;font-size:.71rem;color:var(--muted);display:flex;gap:7px;align-items:center}
.card .meta .au{font-weight:600;color:var(--ink-2)}
.card .meta .seal{width:14px;height:14px;color:var(--green-700)}

/* footer */
footer{margin-top:62px;background:linear-gradient(180deg,#15121C,#0d0b13);color:#c8c2d4;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--violet),var(--green))}
.f-top{padding:50px 0 36px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
.f-brand .wm{font-family:var(--disp);font-weight:900;font-size:1.5rem;color:#fff}
.f-brand .wm b{color:#9b7bff}.f-brand .wm sup{font-size:.42em;color:#8a8398;vertical-align:super}
.f-brand p{margin-top:13px;font-size:.83rem;line-height:1.6;color:#938da3;max-width:36ch}
.f-creds{margin-top:15px;font-family:var(--mono);font-size:.7rem;line-height:1.95;color:#857f95}
.f-creds b{color:#c8c2d4;font-weight:700}
.f-social{margin-top:18px}
.f-social-k{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9b94a8;margin-bottom:10px}
.f-social-row{display:flex;gap:9px;flex-wrap:wrap}
.f-social-row a{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#cfc9d8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);transition:background .2s,color .2s,transform .2s,border-color .2s}
.f-social-row a:hover{background:var(--violet);color:#fff;transform:translateY(-2px);border-color:transparent}
/* logo marchio editore (Alessio Ippolito S.R.L.) */
.f-publisher{display:inline-flex;align-items:center;gap:11px;margin-top:16px;text-decoration:none}
.f-publisher img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.f-publisher .f-pub-t{display:flex;flex-direction:column;line-height:1.25}
.f-publisher .f-pub-k{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9b94a8}
.f-publisher .f-pub-n{font-family:var(--disp);font-weight:600;font-size:.9rem;color:#e9e6f2;transition:color .2s}
.f-publisher:hover .f-pub-n{color:#fff}
/* hover = colore reale di ogni brand */
.f-social-row a[data-soc="facebook"]:hover{background:#1877F2;color:#fff;border-color:transparent}
.f-social-row a[data-soc="x"]:hover,.f-social-row a[data-soc="twitter"]:hover{background:#000;color:#fff;border-color:rgba(255,255,255,.28)}
.f-social-row a[data-soc="instagram"]:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff;border-color:transparent}
.f-social-row a[data-soc="linkedin"]:hover{background:#0A66C2;color:#fff;border-color:transparent}
.f-social-row a[data-soc="youtube"]:hover{background:#FF0000;color:#fff;border-color:transparent}
.f-social-row a[data-soc="tiktok"]:hover{background:#000;color:#69C9D0;border-color:rgba(255,255,255,.28)}
.f-social-row a[data-soc="telegram"]:hover{background:#229ED9;color:#fff;border-color:transparent}
.f-refs{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.f-ref{display:flex;align-items:center;gap:8px;font-size:.76rem;color:#a39db5}
.f-ref .ic{width:18px;height:18px;border-radius:5px;background:rgba(155,123,255,.16);color:#b9a3ff;display:grid;place-items:center;font-size:.62rem;font-weight:800;flex:0 0 auto}
.f-ref a{color:#b9a3ff;border-bottom:1px solid transparent}.f-ref a:hover{border-bottom-color:#b9a3ff}
.f-col{position:relative;padding-left:34px}
.f-col::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.13) 18%,rgba(255,255,255,.13) 82%,transparent)}
.f-col h4{position:relative;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8e87a0;padding-bottom:14px;margin-bottom:8px}
.f-col h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,#9b7bff,rgba(155,123,255,0))}
.f-col a{display:flex;align-items:center;gap:7px;font-size:.85rem;color:#b3adc1;padding:8px 0;transition:color .2s,transform .2s}
.f-col a::before{content:"›";color:#9b7bff;font-weight:700;opacity:0;transform:translateX(-7px);transition:opacity .2s,transform .2s}
.f-col a:hover{color:#fff;transform:translateX(4px)}
.f-col a:hover::before{opacity:1;transform:translateX(0)}
.f-group{grid-column:1/-1;margin-top:8px;padding:26px;background:rgba(155,123,255,.05);border:1px solid rgba(155,123,255,.13);border-radius:var(--r-lg)}
.f-group .k{font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9b7bff}
.f-group .gt{font-family:var(--disp);font-style:italic;font-size:1.4rem;color:#fff;margin-top:5px}
.f-group .gp{font-size:.82rem;color:#938da3;margin-top:6px;max-width:74ch;line-height:1.6}
.fg-props{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.prop{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:18px;transition:transform .25s,border-color .25s,background .25s}
.prop .pn .brand--prop{min-width:0;flex-wrap:wrap}.prop .pn .brand--prop .wm{white-space:nowrap}
.prop:hover{transform:translateY(-3px);border-color:rgba(155,123,255,.34);background:rgba(255,255,255,.055)}
.prop .tag{display:inline-flex;align-items:center;gap:6px;width:fit-content;white-space:nowrap;height:24px;line-height:1;box-sizing:border-box;font-size:.55rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:0 11px;border-radius:7px;margin-bottom:13px}
.prop .tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.prop .tag.reg{color:#6ee0a8;background:rgba(4,190,104,.12);border:1px solid rgba(4,190,104,.3)}
.prop .tag.mk{color:#b9a3ff;background:rgba(155,123,255,.12);border:1px solid rgba(155,123,255,.32)}
.prop .tag.soon{color:#cbc4d6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.prop .pn{font-family:var(--disp);font-weight:600;font-size:1.12rem;color:#fff;letter-spacing:-.01em}
.prop .pn sup{font-size:.5em;vertical-align:super;color:#9b7bff}
/* loghi reali nel footer (preservano la brand identity) */
.prop .pn .prop-logo{display:block;height:30px;width:auto;max-width:230px}
.prop .pn .brand--prop{display:inline-flex;align-items:center;gap:9px}
.prop .pn .brand--prop .mk{width:28px;height:28px;box-shadow:0 6px 16px -8px rgba(73,7,217,.6)}
.prop .pn .brand--prop .wm{font-family:var(--disp);font-weight:900;font-size:1.15rem;letter-spacing:-.02em;line-height:1;color:#fff}
.prop .pn .brand--prop .wm b{color:#9b7bff}
.prop .pn .brand--prop .wm sup{font-size:.42em;font-weight:700;vertical-align:super;margin-left:1px;color:#8a8398}
.prop .pd{font-size:.7rem;color:#857f95;margin-top:6px;line-height:1.5}
.prop .pgo{margin-top:auto;padding-top:14px;font-size:.68rem;font-weight:700;color:#b9a3ff;display:inline-flex;align-items:center;gap:5px;border-top:1px solid rgba(255,255,255,.08)}
.prop:hover .pgo{color:#fff}
/* mobile: le 3 card (Testata/Marchio/Verticali) in carosello a scorrimento */
@media(max-width:640px){
	.fg-props{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
		margin-right:-18px;padding:0 18px 4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.fg-props::-webkit-scrollbar{display:none}
	.fg-props>.prop{scroll-snap-align:start;flex:0 0 76%}
}
.fg-partners{position:relative;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.fg-partners .pk{font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#7b748c;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pk-link{font-size:.66rem;font-weight:700;color:#b9a3ff;text-transform:none;letter-spacing:0;border-bottom:1px solid transparent}
.pk-link:hover{color:#fff;border-bottom-color:#fff}
.fg-partners .logos{display:flex;flex-wrap:nowrap;gap:10px;margin-top:13px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:4px}
.fg-partners .logos::-webkit-scrollbar{display:none}
.fg-partners::after{content:"";position:absolute;right:0;bottom:0;width:40px;height:48px;background:linear-gradient(90deg,transparent,#100e16);pointer-events:none}
.plogo{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:.86rem;color:#8a8398;padding:7px 14px;border:1px solid rgba(255,255,255,.1);border-radius:9px;filter:grayscale(1);opacity:.62;transition:.25s}
.plogo:hover{opacity:1;color:#fff;border-color:rgba(155,123,255,.4);filter:none}

/* — Testata associata ANSO (segnale EEAT) — badge elegante su canvas scuro — */
.f-assoc-wrap{margin-top:20px}
.f-assoc-wrap .k{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#857f95;margin-bottom:10px}
.f-assoc{display:inline-flex;align-items:center;gap:14px;padding:11px 15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:13px;text-decoration:none;transition:transform .25s,border-color .25s,background .25s;max-width:100%}
.f-assoc:hover{transform:translateY(-2px);border-color:rgba(155,123,255,.32);background:rgba(255,255,255,.07);box-shadow:0 16px 34px -22px rgba(0,0,0,.8)}
.f-assoc-logo{height:30px;width:auto;flex:0 0 auto;display:block} /* logo ANSO bianco ufficiale → diretto su canvas scuro */
.f-assoc-wm{font-family:var(--disp);font-weight:900;font-size:1.45rem;line-height:1;letter-spacing:-.02em;color:#e2001a;background:#fff;border-radius:8px;padding:6px 12px;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.f-assoc-txt{display:flex;flex-direction:column;min-width:0}
.f-assoc-txt b{color:#fff;font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.f-assoc-txt span{color:#9b93b6;font-size:.74rem;margin-top:1px}
.f-assoc:hover .f-assoc-txt span{color:#cdbfff}

/* — Editorial avatars (global): initials disc + real photo overlay (to_editorial_avatar) — */
.to-av{position:relative;overflow:hidden;background:var(--ini-bg,#2a2640)!important}
.to-av .av-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--disp);font-weight:700;line-height:1;letter-spacing:.01em}
.to-av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* initials font-size per contesto (single byline/hovercard/authorbox, autore, redazione) */
.ameta .av .av-ini{font-size:1rem}
.hc-av .av-ini{font-size:1rem}
.authorbox .av .av-ini{font-size:1.4rem}
.au-hero .av .av-ini{font-size:2.4rem}
.member .av .av-ini{font-size:1.5rem}
.f-risk{padding:17px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);font-size:.73rem;line-height:1.6;color:#857f95}
.f-bottom{padding:22px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.75rem;color:#7b748c}
.f-bottom .lk{display:flex;gap:16px}.f-bottom a:hover{color:#fff}

@media(max-width:860px){
  .wrap{padding:0 18px}
  .nav,.masthead .cta{display:none}
  .burger{display:flex}
  .masthead .hsearch-btn{margin-left:auto;margin-right:8px}
  .masthead .wrap{padding:14px 18px}
  .topbar .since,.topbar .clock,.topbar .tb-mkt,.topbar .l .dot{display:none}
  .topbar .vfd{font-size:.7rem}
  .topbar .wrap{flex-wrap:wrap;height:auto;min-height:34px;row-gap:3px;padding-top:4px;padding-bottom:4px}
  .f-top{grid-template-columns:1fr 1fr;gap:24px 18px}
  .f-brand{grid-column:1/-1}
  .f-col{padding-left:0;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
  .f-col::before{display:none}
  .fg-props{grid-template-columns:1fr}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* — Refinements 2026-06-14: footer 4 link-cols + header topbar mobile overflow — */
.f-top{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px}
@media(max-width:980px){.f-top{grid-template-columns:1fr 1fr 1fr;gap:26px 20px}.f-brand{grid-column:1/-1}}
@media(max-width:860px){
  .f-top{grid-template-columns:1fr 1fr;gap:22px 16px}
  .topbar .dot{display:none}
  .topbar .tb-mkt{display:none}
  .topbar .wrap{gap:10px}
}
@media(max-width:560px){
  /* social topbar SEMPRE visibili (come in home) → header identico su tutto il sito */
  .topbar .soc{display:flex;gap:6px}
  .topbar .soc a{width:20px;height:20px}
  .topbar .clock{font-size:.64rem}
  .topbar .l{gap:8px}
}

/* — Refinements 2026-06-14 (b): topbar becomes a horizontal scroller on mobile
     (keep ALL info, scrollable) instead of hiding content — Salentohotels pattern — */
@media(max-width:860px){
  .topbar .wrap{justify-content:flex-start;gap:16px;height:auto;min-height:36px;
    overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .topbar .wrap::-webkit-scrollbar{display:none}
  .topbar .l,.topbar .r{flex:0 0 auto}
  /* re-show everything that was previously hidden on mobile */
  .topbar .vfd{display:inline-flex}
  .topbar .since .lbltxt{display:inline}
  .topbar .tb-mkt{display:inline}
  .topbar .dot{display:inline-block}
  .topbar .soc{display:flex}
  .topbar .clock{font-size:.7rem}
}

/* — Refinements 2026-06-14 (c): make tooltip popups interactive so links work — */
.tip .pop{pointer-events:auto}

/* mobile: il trigger "?" resta accanto al titolo (non va a capo da solo).
   La heading diventa flex senza wrap: il testo va a capo internamente, l'icona
   resta affiancata e centrata. Si applica solo dove il .tip è figlio diretto. */
@media(max-width:768px){
	h1:has(> .tip),h2:has(> .tip),h3:has(> .tip),h4:has(> .tip){display:flex;align-items:flex-start;flex-wrap:nowrap;gap:5px}
	h1:has(> .tip)>.tip,h2:has(> .tip)>.tip,h3:has(> .tip)>.tip,h4:has(> .tip)>.tip{flex:0 0 auto;margin-top:.2em}
}

/* =======================================================================
   Refinements 2026-06-14 (d): pro nav (dropdown + real active state),
   readable CTA, mobile sub-items + trust/EEAT block, wide tool pages.
   ===================================================================== */
/* — Desktop nav: dropdown + active — */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{display:inline-flex;align-items:center;gap:5px}
.nav .nav-caret{width:9px;height:6px;opacity:.65;transition:transform .2s}
.nav-item.has-sub:hover .nav-caret{transform:rotate(180deg)}
.nav a.is-active{color:var(--violet)}
.nav a.is-active::after{right:0}
.nav-item.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.submenu{position:absolute;top:calc(100% + 13px);left:-12px;min-width:272px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.nav-item.has-sub:hover .submenu,.nav-item.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none}
.submenu a:hover{background:var(--violet-tint)}
.submenu .sm-t{font-weight:700;font-size:.86rem;color:var(--ink)}
.submenu a:hover .sm-t{color:var(--violet)}
.submenu .sm-d{font-size:.72rem;color:var(--muted)}
/* — News: subtle live dot, not permanent violet (fixes "always selected") — */
.nav a.is-news{color:var(--ink-2);font-weight:600}
.nav a.is-news::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3b30;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(255,59,48,.55);animation:pl 1.8s infinite}
.nav a.is-news.is-active{color:var(--violet)}
@media(prefers-reduced-motion:reduce){.nav a.is-news::before,.mnav .ml.is-news::before{animation:none}}
/* mobile menu: pulsing live dot next to News */
.mnav .ml.is-news{display:inline-flex;align-items:center}
.mnav .ml.is-news::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b30;margin-right:8px;flex:0 0 auto;box-shadow:0 0 0 0 rgba(255,59,48,.55);animation:pl 1.8s infinite}
/* — CTA: label readable in every state — */
.cta,.cta:link,.cta:visited,.cta:hover,.cta:focus,.cta:focus-visible,.cta:active{color:#fff !important}
.cta:hover{background:var(--violet-700)}
/* — Mobile menu: sub-items + trust/EEAT block — */
.mnav .ml.is-active{color:var(--violet)}
.ml-sub{display:flex;flex-direction:column;padding:0 0 8px 14px;margin:-2px 0 4px;border-left:2px solid var(--line)}
.ml-sub a{padding:8px 6px;font-size:.9rem;color:var(--muted);font-weight:600}
.ml-sub a:hover{color:var(--violet)}
.mnav-trust{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.mnav-trust .mt-brand{display:flex;align-items:center;gap:8px}
.mnav-trust .mt-brand .mk{width:26px;height:26px}
.mnav-trust .mt-brand .wm{font-family:var(--disp);font-weight:900;font-size:1.05rem;color:var(--ink)}
.mnav-trust .mt-brand .wm b{color:var(--violet)}
.mnav-trust .mt-brand .wm sup{font-size:.5em;color:var(--muted);vertical-align:super}
.mnav-trust .mt-desc{font-size:.76rem;color:var(--muted);line-height:1.5;margin-top:8px}
.mnav-trust .mt-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px}
.mnav-trust .mt-links a{font-size:.76rem;font-weight:700;color:var(--violet)}
.mnav-trust .mt-legal{margin-top:12px;font-family:var(--mono);font-size:.66rem;line-height:1.75;color:var(--muted)}
.mnav-trust .mt-legal b{color:var(--ink-2)}
/* — Tool page (es. quale-broker-scegliere): full width per la tabella — */
.page-wide{max-width:none !important}
.page-wide .body{max-width:none}

/* =======================================================================
   Carousel scroll-affordance (2026-06-15) — non-invasive, professional.
   main.js adds .to-rail to any row that actually overflows, toggles
   .can-left/.can-right for soft edge fades, and injects a slim progress bar
   (.to-rail-bar) right after the row. Pure signalling: scrolling stays CSS.
   ===================================================================== */
.to-rail{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 100%)}
.to-rail.can-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.to-rail.can-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
.to-rail.can-left.can-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.swipe-hint{display:none} /* retired everywhere: replaced by the .to-rail-bar affordance */
.to-rail-bar{position:relative;height:3px;width:clamp(64px,26%,140px);margin:12px auto 0;background:rgba(21,18,28,.1);border-radius:99px;overflow:hidden}
.to-rail-thumb{position:absolute;left:0;top:0;height:100%;width:30%;border-radius:99px;background:var(--violet,#4907d9);opacity:.6;will-change:transform,width}
/* footer sits on a dark canvas → light affordance */
footer .to-rail-bar{background:rgba(255,255,255,.12)}
footer .to-rail-thumb{background:#9b7bff;opacity:.85}

/* — Footer network cards: horizontal carousel on mobile (like the rest) — */
@media(max-width:860px){
  .fg-props{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-right:-18px;padding-right:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fg-props::-webkit-scrollbar{display:none}
  .fg-props>*{scroll-snap-align:start;flex:0 0 80%}
}