/* ================================================================
   Blog FLACspace — design system allineato a www.flacspace.com
   ================================================================ */
:root {
    --c-accent:      #4b4696;
    --c-accent-dark: #3a3780;
    --c-yellow:      #f6c56e;
    --c-dark:        #0C0E1E;
    --c-text:        #1d1d1b;
    --c-muted:       #74747C;
    --c-surface:     #F7F7F5;
    --c-border:      #E8E8E6;
    --c-white:       #FFFFFF;

    --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

    --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
    --shadow-md: 0 4px 20px rgba(0,0,0,.09);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.16);

    --ease: cubic-bezier(.4,0,.2,1);
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Luckiest Guy', var(--font);
    --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    font-size: 1rem; line-height: 1.65;
    color: var(--c-text); background: var(--c-white);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ── Typography helpers ──────────────────────────────────── */
.display-text { font-weight: 800; line-height: 1.06; letter-spacing: -.035em; font-size: clamp(2rem,3.5vw,3.5rem); }
.h2-text { font-weight: 700; line-height: 1.15; letter-spacing: -.025em; font-size: clamp(1.8rem,3.5vw,2.7rem); }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.text-muted-c { color: var(--c-muted); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-flac {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 700; font-size: .9375rem; padding: .8rem 1.9rem;
    border-radius: var(--r-full); transition: all var(--ease) .2s;
    white-space: nowrap; border: none; font-family: var(--font);
}
.btn-flac-primary { background: var(--c-accent); color: #fff !important; box-shadow: 0 4px 24px rgba(75,70,150,.28); }
.btn-flac-primary:hover { background: var(--c-accent-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(75,70,150,.4); }
.btn-flac-outline-white { background: transparent; color: rgba(255,255,255,.95) !important; border: 2px solid rgba(255,255,255,.35); }
.btn-flac-outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.btn-flac-outline-dark { background: transparent; color: var(--c-text) !important; border: 2px solid var(--c-border); }
.btn-flac-outline-dark:hover { background: var(--c-surface); border-color: var(--c-text); }

/* ── Navbar (fixed; trasparente sull'hero, solida allo scroll) ── */
#navbar-main.navbar-blog {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
    padding: 1.05rem 0;
    transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img { height: 34px; width: auto; transition: filter .3s; }

/* Stato di default = sopra hero scuro: testo bianco */
.navbar-blog .nav-link-c { color: rgba(255,255,255,.8) !important; }
.navbar-blog .nav-link-c:hover { color: #fff !important; background: rgba(255,255,255,.12); }
.navbar-blog .nav-icon-btn { color: #fff; border-color: rgba(255,255,255,.25); }
.navbar-blog .navbar-toggler-c span { background: #fff; }

/* Stato solido (scrolled o pagine interne) */
.navbar-blog.scrolled, .navbar-blog.nav-solid {
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 1px 0 var(--c-border), 0 6px 24px rgba(0,0,0,.05);
    padding: .65rem 0;
}
.navbar-blog.scrolled .nav-link-c, .navbar-blog.nav-solid .nav-link-c { color: var(--c-muted) !important; }
.navbar-blog.scrolled .nav-link-c:hover, .navbar-blog.nav-solid .nav-link-c:hover { color: var(--c-text) !important; background: var(--c-surface); }
.navbar-blog.scrolled .nav-icon-btn, .navbar-blog.nav-solid .nav-icon-btn { color: var(--c-text); border-color: var(--c-border); }
.navbar-blog.scrolled .navbar-toggler-c span, .navbar-blog.nav-solid .navbar-toggler-c span { background: var(--c-text); }

.nav-link-c { font-size: .875rem; font-weight: 600; padding: .4rem .8rem !important; border-radius: var(--r-sm); transition: color .2s, background .2s; }
.nav-cta-btn {
    font-size: .875rem; font-weight: 700; background: var(--c-accent); color: #fff !important;
    padding: .55rem 1.25rem !important; border-radius: var(--r-full);
    transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 3px 16px rgba(75,70,150,.3);
}
.nav-cta-btn:hover { background: var(--c-accent-dark) !important; transform: translateY(-1px); }
.nav-icon-btn { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
.nav-icon-btn:hover { background: rgba(127,127,127,.12); }

/* Testo scorrevole (ticker) accanto al logo */
.nav-ticker { flex: 1; min-width: 0; overflow: hidden; margin: 0 2rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nav-ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: nav-ticker 34s linear infinite; }
.nav-ticker:hover .nav-ticker-track { animation-play-state: paused; }
.nav-ticker-track .tk { font-size: .8rem; font-weight: 600; letter-spacing: .03em; padding: 0 1.6rem; position: relative; }
.nav-ticker-track .tk::after { content: '✦'; position: absolute; right: -.3rem; opacity: .4; font-size: .6rem; top: 50%; transform: translateY(-50%); }
.navbar-blog .nav-ticker { color: rgba(255,255,255,.8); }
.navbar-blog.scrolled .nav-ticker, .navbar-blog.nav-solid .nav-ticker { color: var(--c-muted); }
@keyframes nav-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.navbar-toggler-c { padding: .4rem; display: flex; flex-direction: column; gap: 5px; }
.navbar-toggler-c span { display: block; width: 22px; height: 2px; border-radius: 2px; transition: background .3s; }
.nav-link-mobile { display: block; font-size: .9375rem; font-weight: 600; color: var(--c-text); padding: .7rem 1rem; border-radius: var(--r-sm); }
.nav-link-mobile:hover { color: var(--c-accent); background: var(--c-surface); }
#navMobile { padding-top: .6rem; margin-top: .6rem; background: rgba(255,255,255,.98); border-radius: var(--r-lg); padding: .6rem; box-shadow: var(--shadow-lg); }

/* Le pagine senza hero scuro: il contenuto parte sotto la navbar fixed */
body:not(.has-hero) .blog-main { padding-top: var(--nav-h); }

/* ════════════════════════════════════════════════════════
   HERO CINEMATOGRAFICA (home) — video + glow + griglia + nuvolette
   ════════════════════════════════════════════════════════ */
#hero-blog {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; overflow: hidden;
    background: url('../img/hero-poster.jpg') center/cover no-repeat, var(--c-dark);
}
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transform: translateZ(0); }
.hero-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-glow {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to right, rgba(4,6,14,.95) 0%, rgba(4,6,14,.82) 42%, rgba(4,6,14,.4) 68%, rgba(4,6,14,.22) 100%),
        linear-gradient(to bottom, rgba(4,6,14,.55) 0%, transparent 28%, transparent 72%, rgba(4,6,14,.72) 100%);
}
.hero-grid {
    position: absolute; inset: 0; z-index: 1;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-inner { position: relative; z-index: 3; padding-top: calc(var(--nav-h) + 1.6rem); padding-bottom: 6rem; }
.hero-blog-content { padding-bottom: 1rem; }

/* Barra categorie in vetro, ancorata in fondo all'hero */
.hero-catbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    background: rgba(255,255,255,.07); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 -6px 24px rgba(0,0,0,.18); }
.hero-catbar-inner { display: flex; align-items: center; gap: .25rem; padding: .65rem 0; overflow-x: auto; scrollbar-width: none; }
.hero-catbar-inner::-webkit-scrollbar { display: none; }
.catbar-label { color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-right: .7rem; flex-shrink: 0; }
.catbar-item { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; padding: .5rem .95rem; border-radius: var(--r-full); color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.catbar-item:hover { background: rgba(255,255,255,.16); color: #fff; }
.catbar-item .cat-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.catbar-n { font-size: .7rem; opacity: .5; font-weight: 700; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(75,70,150,.18); border: 1px solid rgba(75,70,150,.4);
    color: #b7b5ec; font-size: .8125rem; font-weight: 700; padding: .4rem 1rem;
    border-radius: var(--r-full); margin-bottom: 1.5rem; letter-spacing: .04em;
}
.hero-badge-dot { width: 6px; height: 6px; background: var(--c-accent); border-radius: 50%; box-shadow: 0 0 8px var(--c-accent); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero-blog-title {
    color: #fff; font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
    font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 1.25rem;
    text-shadow: 0 2px 30px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.9);
}
.hero-blog-title em { font-style: normal; color: var(--c-yellow); text-shadow: 0 2px 30px rgba(0,0,0,.8); }
.hero-rotating { display: inline-block; color: var(--c-yellow); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hero-rotating.swap { opacity: 0; transform: translateY(8px); }
.hero-blog-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.9);
    max-width: 480px; line-height: 1.7; margin-bottom: 2rem;
    text-shadow: 0 1px 12px rgba(0,0,0,.9);
}

/* Search bar grande nell'hero */
.hero-search {
    display: flex; align-items: center; gap: .5rem; max-width: 480px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(14px); border-radius: var(--r-full); padding: .45rem .45rem .45rem 1.4rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.hero-search input { flex: 1; border: none; background: transparent; outline: none; color: #fff; font-size: 1rem; }
.hero-search input::placeholder { color: rgba(255,255,255,.6); }
.hero-search button { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.hero-search button:hover { background: var(--c-accent-dark); transform: scale(1.05); }

/* ── Categorie hero: riga glass ordinata (Apple-style) ───── */
.hero-cats-label { color: rgba(255,255,255,.55); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 2rem 0 .9rem; }
/* Fascia categorie full-width simmetrica in cima all'hero */
.hero-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .7rem; width: 100%; margin: 0 auto 2.8rem; }
.cat-glass {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem 1.05rem; border-radius: var(--r-full);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: rgba(255,255,255,.92); font-size: .875rem; font-weight: 600; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 20px rgba(0,0,0,.18);
    transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s;
}
.cat-glass:hover { transform: translateY(-3px); background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 30px rgba(0,0,0,.3); }
.cat-glass .cat-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; flex-shrink: 0; }
.cat-glass .cat-n { font-size: .72rem; font-weight: 700; opacity: .55; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.anim-up { animation: fadeInUp .6s var(--ease) both; }
.anim-up-2 { animation-delay: .1s; } .anim-up-3 { animation-delay: .2s; } .anim-up-4 { animation-delay: .32s; }

/* hint scroll in fondo all'hero */
.hero-scroll-hint { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,.5); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ── Hero leggera (pagine categoria/ricerca) ─────────────── */
.blog-hero {
    background: radial-gradient(1200px 500px at 50% -10%, rgba(75,70,150,.10), transparent 60%), var(--c-surface);
    padding: 2.5rem 0 3rem; text-align: center; border-bottom: 1px solid var(--c-border);
}
.blog-hero .display-text { max-width: 18ch; margin: 0 auto .8rem; }
.blog-hero p { color: var(--c-muted); font-size: 1.1rem; max-width: 60ch; margin: 0 auto; }

/* ── Category chips (filtro su pagine interne) ───────────── */
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.6rem; }
.cat-chip { font-size: .85rem; font-weight: 600; padding: .45rem 1.1rem; border-radius: var(--r-full); background: var(--c-white); border: 1px solid var(--c-border); color: var(--c-text); transition: all .2s var(--ease); }
.cat-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cat-chip.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── Griglia articoli ────────────────────────────────────── */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 991px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .posts-grid { grid-template-columns: 1fr; } }

.post-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.post-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--c-surface); display: block; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: .55rem 0 .5rem; }
.post-card:hover .post-card-title { color: var(--c-accent); }
.post-card-excerpt { color: var(--c-muted); font-size: .9rem; line-height: 1.6; flex: 1; }
.post-card-meta { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: .8rem; color: var(--c-muted); }

.badge-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .25rem .7rem; border-radius: var(--r-full); background: rgba(75,70,150,.1); color: var(--c-accent); }

/* ── Card articolo: social card quadrata intera + barra meta ── */
.pcard { display: block; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pcard-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--c-surface); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; }
.pcard-cat { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--c-text); min-width: 0; }
.pcard-cat span.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-cat .cat-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.pcard-meta { font-size: .76rem; color: var(--c-muted); white-space: nowrap; flex-shrink: 0; }
/* placeholder brandizzato (articoli senza immagine) — contenitore autonomo */
.ph-card { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; }
.ph-card::before { content: ''; position: absolute; inset: 0; background:
    radial-gradient(120% 90% at 80% 12%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 26px 26px; }
.ph-card .ph-logo { position: relative; width: 52%; max-width: 150px; height: auto; opacity: .95; margin-bottom: 1.1rem; }
.ph-card .ph-title { position: relative; color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.32; text-shadow: 0 1px 10px rgba(0,0,0,.4); }

/* ── Featured: split compatto (immagine + testo) ─────────── */
.feat { display: grid; grid-template-columns: minmax(0, 360px) 1fr; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 3rem; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.feat:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.feat-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--c-surface); }
.feat-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-text { padding: clamp(1.5rem, 3.2vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.feat-text .eyebrow { color: var(--c-accent); }
.feat-headline { font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; color: var(--c-text); margin: .7rem 0 .9rem; }
.feat-sub { color: var(--c-muted); line-height: 1.6; margin-bottom: 1.2rem; }
.feat-meta { font-size: .82rem; color: var(--c-muted); display: flex; gap: .5rem; align-items: center; margin-bottom: 1.4rem; }
.feat-btn { align-self: flex-start; }
@media (max-width: 768px) {
    .feat { grid-template-columns: 1fr; }
    .feat-img { max-height: 380px; }
}

/* ── Paginazione ─────────────────────────────────────────── */
.pagination-flac { display: flex; gap: .4rem; justify-content: center; margin: 3rem 0 1rem; flex-wrap: wrap; }
.pagination-flac a, .pagination-flac span { min-width: 42px; height: 42px; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1px solid var(--c-border); font-weight: 600; font-size: .9rem; color: var(--c-text); transition: all .2s; }
.pagination-flac a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination-flac .current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pagination-flac .disabled { opacity: .4; pointer-events: none; }

/* ════════ ARTICOLO SINGOLO (editoriale) ════════ */
/* Barra avanzamento lettura */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; background: transparent; pointer-events: none; }
.read-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-accent), var(--c-yellow)); }

/* Hero editoriale: copertina sfocata + testo nostro sopra */
.art-hero { position: relative; overflow: hidden; background: var(--c-dark); color: #fff; padding: calc(var(--nav-h) + 3rem) 0 3.2rem; }
.art-hero-bg { position: absolute; inset: -60px; z-index: 0; background-size: cover; background-position: center; filter: blur(24px) brightness(.5) saturate(1.15); transform: scale(1.12); }
.art-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(8,9,16,.5) 0%, rgba(8,9,16,.45) 45%, rgba(8,9,16,.85) 100%); }
.art-hero-inner { position: relative; z-index: 2; max-width: 800px; }
.art-cat { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .38rem .9rem; border-radius: var(--r-full); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.art-cat .cat-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.art-title { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; margin: 1.1rem 0 .9rem; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.art-lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: rgba(255,255,255,.9); line-height: 1.55; max-width: 60ch; }
.art-metaline { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; font-size: .9rem; color: rgba(255,255,255,.78); }
.art-author { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: #fff; }
.art-author .ava { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #fff; }
.art-dot-sep { opacity: .45; }
.art-share-h { display: none; align-items: center; gap: .5rem; }
.art-share-h a, .art-share-h button { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.art-share-h a:hover, .art-share-h button:hover { background: rgba(255,255,255,.22); }

/* Layout: rail condivisione + corpo + indice */
.art-layout { max-width: 1180px; margin: 0 auto; padding: 2.6rem clamp(1rem,4vw,2rem) 1rem; display: grid; grid-template-columns: 52px minmax(0, 720px) 260px; gap: 2.6rem; justify-content: center; align-items: start; }
.art-layout--notoc { grid-template-columns: 52px minmax(0, 760px); }
.art-share-rail { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: flex; flex-direction: column; gap: .55rem; align-items: center; }
.art-share-rail .lbl { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.art-share-rail a, .art-share-rail button { width: 44px; height: 44px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: #fff; color: var(--c-muted); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.art-share-rail a:hover, .art-share-rail button:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; transform: translateY(-2px); }

.art-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.art-toc .toc-title { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .9rem; display: block; }
.art-toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--c-border); }
.toc-link { font-size: .86rem; line-height: 1.4; color: var(--c-muted); padding: .42rem 0 .42rem .9rem; margin-left: -2px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.toc-link:hover { color: var(--c-text); }
.toc-link.active { color: var(--c-accent); border-color: var(--c-accent); font-weight: 600; }
.art-toc-cta { margin-top: 1.6rem; background: linear-gradient(140deg, var(--c-accent), var(--c-accent-dark)); border-radius: var(--r-lg); padding: 1.3rem; color: #fff; }
.art-aside > .art-toc-cta:first-child { margin-top: 0; }
.art-toc-cta p { font-size: .9rem; color: rgba(255,255,255,.88); margin-bottom: .9rem; line-height: 1.45; }
.art-toc-cta .btn-flac { width: 100%; background: #fff; color: var(--c-accent) !important; box-shadow: none; padding: .65rem 1rem; }
.art-toc-cta .btn-flac:hover { background: var(--c-yellow); color: var(--c-accent-dark) !important; }

/* Corpo articolo dentro la griglia */
.art-body { max-width: none; margin: 0; }
.art-body h2[id] { scroll-margin-top: calc(var(--nav-h) + 1.2rem); }
.art-body > p:first-of-type { font-size: 1.18rem; color: #1d1d1b; }
.art-body > p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3rem; line-height: .82; float: left; margin: .3rem .65rem -.1rem 0; color: var(--c-accent); }

@media (max-width: 1100px) {
    .art-layout, .art-layout--notoc { grid-template-columns: minmax(0, 760px); }
    .art-share-rail, .art-aside { display: none; }
    .art-share-h { display: flex; }
}

.article-body { max-width: 760px; margin: 2.5rem auto; font-size: 1.12rem; line-height: 1.8; color: #2b2b2b; }
.article-body h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 2.2rem 0 .9rem; line-height: 1.2; }
.article-body h3 { font-size: 1.35rem; font-weight: 700; margin: 1.8rem 0 .7rem; }
.article-body p { margin: 0 0 1.3rem; }
.article-body ul, .article-body ol { margin: 0 0 1.3rem 1.3rem; }
.article-body ul { list-style: disc; } .article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .5rem; }
.article-body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { border-radius: var(--r-lg); margin: 1.5rem auto; box-shadow: var(--shadow-md); }
.article-body blockquote { border-left: 4px solid var(--c-accent); background: var(--c-surface); padding: 1rem 1.3rem; margin: 1.5rem 0; border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; }
.article-body figure { margin: 1.5rem 0; }
.article-body figcaption { font-size: .85rem; color: var(--c-muted); text-align: center; margin-top: .5rem; }

.article-tags { max-width: 760px; margin: 0 auto 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-pill { font-size: .82rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-muted); }
.tag-pill:hover { color: var(--c-accent); border-color: var(--c-accent); }

.share-bar { max-width: 760px; margin: 0 auto 2rem; display: flex; align-items: center; gap: .6rem; }
.share-bar a { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; color: var(--c-muted); transition: all .2s; }
.share-bar a:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── Sezioni ─────────────────────────────────────────────── */
.section { padding: 3.5rem 0; }
.section-surface { background: var(--c-surface); }
.section-title { text-align: center; margin-bottom: 2.2rem; }

/* CTA banner verso il sito */
.cta-banner { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); border-radius: var(--r-xl); padding: 3rem 2rem; text-align: center; color: #fff; margin: 3rem 0; }
.cta-banner h2 { color: #fff; font-weight: 800; letter-spacing: -.02em; margin-bottom: .6rem; }
.cta-banner p { color: rgba(255,255,255,.85); margin-bottom: 1.5rem; }
.cta-banner .btn-flac-primary { background: #fff; color: var(--c-accent) !important; box-shadow: none; }
.cta-banner .btn-flac-primary:hover { background: var(--c-yellow); color: var(--c-accent-dark) !important; }

/* ── Footer ──────────────────────────────────────────────── */
#footer { background: #05070E; padding: 4.5rem 0 2rem; font-size: .875rem; color: rgba(255,255,255,.45); }
.foot-logo-link { display: inline-flex; margin-bottom: 1rem; }
.foot-logo-img { height: 36px; width: auto; }
.foot-tagline { color: rgba(255,255,255,.35); line-height: 1.65; margin-bottom: 1.5rem; max-width: 240px; }
.foot-social { display: flex; gap: .625rem; }
.foot-social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); transition: all .2s; }
.foot-social a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.foot-col-title { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 1.25rem; display: block; }
.foot-links { display: flex; flex-direction: column; gap: .625rem; }
.foot-links a { color: rgba(255,255,255,.35); font-size: .875rem; transition: color .2s; }
.foot-links a:hover { color: rgba(255,255,255,.85); }
hr.foot-hr { border: none; border-top: 1px solid rgba(255,255,255,.05); margin: 2.5rem 0 1.75rem; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .8125rem; color: rgba(255,255,255,.25); }
.foot-bottom a { color: rgba(255,255,255,.25); transition: color .2s; }
.foot-bottom a:hover { color: rgba(255,255,255,.6); }
.foot-bottom-links { display: flex; gap: 1.5rem; }

/* ── Stato vuoto ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--c-muted); }
.empty-state svg { opacity: .3; margin-bottom: 1rem; }

/* ════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* su mobile niente video pesante: resta la foto fallback di sfondo */
    .hero-video-wrap { display: none; }
    .hero-blog-content { text-align: center; }
    .hero-search { margin: 0 auto; }
    .hero-cats { justify-content: center; margin-left: auto; margin-right: auto; }
    .hero-cats-label { text-align: center; }
    .hero-scroll-hint { display: none; }
    .hero-glow { background:
        linear-gradient(to bottom, rgba(4,6,14,.7) 0%, rgba(4,6,14,.55) 40%, rgba(4,6,14,.85) 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-badge-dot, .hero-scroll-hint, .anim-up { animation: none !important; }
}

/* ════════════════════════════════════════════════════════
   LIQUID GLASS — pagina articolo (stile iOS 26)
   ════════════════════════════════════════════════════════ */
:root { --glass-bg: rgba(255,255,255,.72); --glass-blur: blur(30px) saturate(180%); --glass-radius: 28px; }

body.art-page { background: #e9eaf2; }
.art-page .blog-main { position: relative; z-index: 1; }

.art-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(55% 45% at 12% 2%, rgba(75,70,150,.22), transparent 60%),
        radial-gradient(45% 45% at 92% 8%, rgba(246,197,110,.20), transparent 55%),
        radial-gradient(60% 55% at 85% 96%, rgba(75,70,150,.16), transparent 60%),
        #e9eaf2; }
.art-ambient::before { content: ''; position: absolute; inset: 0; background-image: var(--cover, none); background-size: cover; background-position: center; filter: blur(70px) saturate(1.4); opacity: .20; }

/* Hero trasparente sopra l'ambient, testo scuro */
.art-page .art-hero { background: transparent; color: var(--c-text); padding: calc(var(--nav-h) + 2.4rem) 0 5rem; }
.art-page .art-hero::after, .art-page .art-hero-bg { display: none; }
.art-page .art-cat { background: var(--glass-bg); border: 1px solid rgba(255,255,255,.7); color: var(--c-text); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); }
.art-page .art-title { color: var(--c-text); text-shadow: none; }
.art-page .art-lead { color: var(--c-muted); }
.art-page .art-metaline { color: var(--c-muted); }
.art-page .art-author { color: var(--c-text); }
.art-page .art-share-h a, .art-page .art-share-h button { border-color: rgba(255,255,255,.7); background: var(--glass-bg); color: var(--c-text); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* Le lastre fluttuano sopra l'hero */
.art-page .art-layout { margin-top: -3rem; position: relative; z-index: 2; }

/* Lastra di vetro del corpo */
.art-page .art-body {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--glass-radius);
    padding: clamp(1.5rem, 3.5vw, 3rem);
    box-shadow: 0 24px 70px rgba(30,28,70,.16), inset 0 1px 0 rgba(255,255,255,.85);
    color: #20202a;
}

/* Capsule vetro: indice + rail condivisione */
.art-page .art-aside { top: calc(var(--nav-h) + 1.2rem); }
.art-page .art-toc { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.65); border-radius: 22px; padding: 1.3rem 1.4rem; box-shadow: 0 16px 50px rgba(30,28,70,.12), inset 0 1px 0 rgba(255,255,255,.8); }
.art-page .art-toc nav { border-left-color: rgba(0,0,0,.12); }
.art-page .art-share-rail a, .art-page .art-share-rail button { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.6); color: var(--c-text); box-shadow: 0 8px 24px rgba(30,28,70,.1), inset 0 1px 0 rgba(255,255,255,.75); }
.art-page .art-share-rail a:hover, .art-page .art-share-rail button:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* Sezioni sotto trasparenti sopra l'ambient */
.art-page .section-surface { background: transparent; }
.art-page #footer { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════
   LEAD / CONVERSIONE — CTA WhatsApp + configuratore
   ════════════════════════════════════════════════════════ */
.lead-cta { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); border-radius: var(--r-xl); padding: clamp(2rem,4vw,3.2rem); text-align: center; color: #fff; margin: 3rem 0; box-shadow: 0 20px 60px rgba(75,70,150,.3); position: relative; z-index: 1; }
.lead-trust { font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: rgba(255,255,255,.8); margin-bottom: 1rem; }
.lead-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: .7rem; }
.lead-cta p { color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 auto 1.6rem; line-height: 1.6; }
.lead-cta p strong { color: #fff; }
.lead-cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.lead-cta .btn-flac-primary { background: #fff; color: var(--c-accent) !important; box-shadow: none; }
.lead-cta .btn-flac-primary:hover { background: var(--c-yellow); color: var(--c-accent-dark) !important; }
.lead-wa { background: #25D366; color: #fff !important; box-shadow: 0 6px 20px rgba(37,211,102,.4); }
.lead-wa:hover { background: #1da851; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.5); }

/* CTA contestuale nell'indice (sidebar) — pulsante robusto, niente overflow */
.art-toc-cta .btn-flac { width: 100%; background: #25D366; color: #fff !important; box-shadow: none; white-space: normal; line-height: 1.25; padding: .65rem .8rem; font-size: .875rem; gap: .45rem; text-align: center; }
.art-toc-cta .btn-flac:hover { background: #1da851; color: #fff !important; }
.art-toc-cta .btn-flac svg { width: 18px; height: 18px; flex: 0 0 auto; }
.art-toc-cta-link { display: block; text-align: center; margin-top: .7rem; font-size: .82rem; color: rgba(255,255,255,.85); text-decoration: underline; }
.art-toc-cta-link:hover { color: #fff; }

/* Pulsante WhatsApp flottante (tutto il sito) */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1040; display: inline-flex; align-items: center; gap: .6rem; background: #25D366; color: #fff !important; padding: .85rem 1.25rem; border-radius: var(--r-full); font-weight: 700; font-size: .9rem; box-shadow: 0 10px 30px rgba(37,211,102,.45); transition: transform .2s, box-shadow .2s; }
.wa-float:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 38px rgba(37,211,102,.55); color: #fff !important; }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-full); box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: wa-pulse 2.4s infinite; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (max-width: 640px) {
    .wa-float { right: 14px; bottom: 14px; padding: .9rem; }
    .wa-float-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }

/* ════════════════════════════════════════════════════════
   ICONE — niente deformazioni + stile vetro coerente (iOS)
   ════════════════════════════════════════════════════════ */
/* Gli SVG dentro pulsanti flex non si schiacciano mai */
.btn-flac svg, .nav-icon-btn svg, .art-share-rail svg, .art-share-h svg,
.wa-float svg, .lead-wa svg, .share-bar svg, .gcard svg, .feat svg { flex: 0 0 auto; display: block; }

/* Dimensioni icone uniformi */
.art-share-rail a svg, .art-share-rail button svg,
.art-share-h a svg, .art-share-h button svg { width: 19px; height: 19px; }
.wa-float svg { width: 26px; height: 26px; }
.lead-wa svg { width: 20px; height: 20px; }

/* Rail condivisione articolo: capsule di vetro iOS, icone nitide e contrastate */
.art-page .art-share-rail a, .art-page .art-share-rail button {
    width: 46px; height: 46px; color: var(--c-text);
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 8px 22px rgba(30,28,70,.14), inset 0 1px 0 rgba(255,255,255,.95);
}
.art-page .art-share-rail a:hover, .art-page .art-share-rail button:hover {
    background: var(--c-accent); color: #fff; border-color: var(--c-accent);
    transform: translateY(-2px); box-shadow: 0 12px 28px rgba(75,70,150,.35);
}
/* Pulsante WhatsApp flottante: vetro verde + glyph nitido */
.wa-float { box-shadow: 0 10px 30px rgba(37,211,102,.45), inset 0 1px 0 rgba(255,255,255,.35); }