/* Netcomm Academy — frontend catalogo e scheda contenuto.
   Stili scoped sotto .na-catalog e .na-single per non interferire con OceanWP. */

/* Token del design system (L0). Fonte canonica: child theme assets/na-theme.css.
   Qui replicati come fallback così il plugin resta autosufficiente. TENERLI ALLINEATI. */
:root{
	--na-bg:#0d0f13; --na-bg2:#15181f; --na-card:#1b1f28; --na-card2:#222734;
	--na-text:#f2f4f8; --na-muted:#9aa3b2; --na-line:#2a2f3a;
	--na-accent:#1a7d3c; --na-accent2:#37b85f; --na-accent-ink:#fff; --na-danger:#ff6b81;
	--na-radius:12px; --na-radius-sm:8px; --na-radius-pill:999px;
	--na-shadow-card:0 18px 40px rgba(0,0,0,.55); --na-shadow-pop:0 16px 40px rgba(0,0,0,.6);
	--na-transition:.15s ease;
	--na-font:'Libre Franklin',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--na-font-head:'Archivo','Libre Franklin',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--na-focus:0 0 0 3px rgba(55,184,95,.55);
}
.na-catalog, .na-single{
	color:var(--na-text);
	font-family:var(--na-font);
}
/* Titoli e CTA = Archivo; testi = Libre Franklin (ereditato). */
.na-catalog h1,.na-catalog h2,.na-catalog h3,.na-catalog h4,
.na-single h1,.na-single h2,.na-single h3,.na-single h4,
.na-cardbody h3,.na-seqbar-title{font-family:var(--na-font-head)}
.na-btn,.na-catalog .na-btn,.na-single .na-btn{font-family:var(--na-font-head)}

/* Focus accessibile e selezione testo: solo dentro le viste Academy
   (header/footer e resto del sito restano gestiti da OceanWP/WordPress). */
.na-catalog :focus-visible, .na-single :focus-visible{
	outline:none; box-shadow:var(--na-focus); border-radius:var(--na-radius-sm);
}
.na-catalog ::selection, .na-single ::selection{ background:rgba(55,184,95,.35); color:#fff; }

/* Niente sottolineatura sui link delle viste Academy (override OceanWP).
   Solo i link dentro le descrizioni/percorso si sottolineano all'hover. */
.na-catalog a, .na-single a{ text-decoration:none !important; }
.na-desc a:hover, .na-hero-desc a:hover, .na-epi-perc:hover{ text-decoration:underline !important; }

/* Contenitore interno centrato: le sezioni scure vanno edge-to-edge,
   il contenuto resta entro una larghezza leggibile.
   Stessa regola del .container di OceanWP (header, pagine generiche, login):
   larghezza 90% con massimo 1400px ("Site Width" del Customizer) e nessun
   padding interno, così logo/menu e contenuto hanno lo stesso bordo a ogni
   larghezza. Se cambia la Site Width di OceanWP, aggiornare anche qui. */
.na-wrap{width:90%;max-width:1400px;margin:0 auto;padding:0}

/* ---------- Catalogo ---------- */
.na-catalog{background:var(--na-bg);width:100%;padding:0 0 60px;min-height:60vh}
.na-catalog *{box-sizing:border-box}
.na-catalog .na-hero{padding:52px 0 12px}
.na-catalog .na-hero h1{font-size:36px;font-weight:700;letter-spacing:-.4px;margin:0 0 8px;line-height:1.12}
.na-catalog .na-hero p{color:var(--na-muted);margin:0;max-width:680px;font-size:16px;line-height:1.5}

.na-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:18px 0;border-bottom:1px solid var(--na-line)}
.na-search{flex:1;min-width:220px;display:flex;align-items:center;gap:6px;background:var(--na-card);border:1px solid var(--na-line);border-radius:8px;padding:8px 12px}
.na-search input{background:transparent;border:0;outline:0;color:var(--na-text);width:100%;font-size:14px}
.na-dd{position:relative}
.na-dd>button{display:flex;align-items:center;gap:8px;background:var(--na-card);border:1px solid var(--na-line);color:var(--na-text);padding:9px 14px;border-radius:8px;cursor:pointer;font-size:14px}
.na-dd .na-count{background:var(--na-accent);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.na-panel{display:none;position:absolute;top:46px;left:0;min-width:230px;background:var(--na-card2);border:1px solid var(--na-line);border-radius:10px;padding:8px;z-index:30;max-height:340px;overflow:auto;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.na-panel.open{display:block}
.na-panel label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;font-size:14px;cursor:pointer}
.na-panel label:hover{background:rgba(255,255,255,.06)}
.na-sortbar{display:flex;align-items:center;gap:10px;color:var(--na-muted);font-size:13px;margin-left:auto}
.na-sortbar select{
	background-color:var(--na-card);border:1px solid var(--na-line);color:var(--na-text);
	font-size:14px;line-height:1.4;height:auto;min-height:40px;
	padding:8px 34px 8px 12px;border-radius:8px;max-width:100%;
	-webkit-appearance:none;-moz-appearance:none;appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23a8b0bb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat;background-position:right 12px center;
}
/* Barra filtri (eventi): resta a sinistra; solo il gruppo "Ordina" va a destra. */
.na-filterbar{margin-left:0}

.na-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;min-height:8px}
.na-chip{display:inline-flex;align-items:center;gap:8px;background:var(--na-card2);border:1px solid var(--na-accent);color:var(--na-text);border-radius:999px;padding:5px 10px;font-size:12px}
.na-chip b{cursor:pointer;color:var(--na-muted)}
.na-clear{color:var(--na-accent2);cursor:pointer;font-size:13px;align-self:center;background:none;border:0;font-family:inherit}
.na-clear:hover{text-decoration:underline}
.na-resultcount{color:var(--na-muted);font-size:14px;padding:2px 0 0}
.na-resultcount:empty{display:none}

.na-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:18px 0 24px}
.na-card{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;display:block;color:inherit;text-decoration:none}
.na-card h3{text-decoration:none}
.na-card:hover{transform:translateY(-4px);box-shadow:var(--na-shadow-card);border-color:var(--na-accent)}
.na-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1d3b2a,#10201a)}
.na-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.na-card:hover .na-thumb img{transform:scale(1.06)}
.na-thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none;z-index:1}
.na-thumb .na-tipo,.na-thumb .na-dur,.na-thumb .na-play,.na-thumb .na-fav,.na-thumb .na-plus{z-index:2}
.na-thumb .na-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.na-card:hover .na-play{opacity:1}
.na-thumb .na-play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
/* Triangolo "play" disegnato in CSS (niente emoji): scuro su cerchio bianco. */
.na-thumb .na-play span::after{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #111;margin-left:3px}
.na-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:2px 7px;border-radius:4px}
.na-thumb .na-progressbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.28);z-index:2}
.na-thumb .na-progressbar>span{display:block;height:100%;background:var(--na-accent2,#1a7d3c)}
.na-tipo{position:absolute;left:8px;top:8px;background:#475569;color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:4px}
/* Colore distinto per ciascuna tipologia (testo bianco). Default = grigio ardesia. */
.na-tipo[data-tipo="webinar"]{background:#006734}          /* verde Academy */
.na-tipo[data-tipo="workshop"]{background:#234577}         /* blu Netcomm scuro */
.na-tipo[data-tipo="gruppo-di-lavoro"]{background:#2F5C9E} /* blu Netcomm */
.na-tipo[data-tipo="netcomm-forum"]{background:#13927A}    /* eventi */
.na-tipo[data-tipo="netcomm-focus"]{background:#13927A}    /* eventi */
.na-thumb .na-free,.na-thumb .na-sigillo,.na-thumb .na-locktag{position:absolute;left:8px;bottom:8px;z-index:2;font-size:12px;font-weight:700;line-height:1;border-radius:4px}
.na-thumb .na-free{background:#f5c518;color:#1a1a1a;padding:4px 8px;letter-spacing:.5px}
.na-thumb .na-sigillo{background:#0C6735;color:#fff;padding:4px 8px;letter-spacing:.5px}
.na-sigillo-inline{display:inline-block;vertical-align:middle;margin-left:10px;background:#0C6735;color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:4px}
.na-thumb .na-locktag{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.72);color:#fff;padding:4px 8px;font-weight:700;letter-spacing:.3px;border:1px solid rgba(255,255,255,.18)}
.na-free-inline{display:inline-block;vertical-align:middle;margin-left:10px;background:#f5c518;color:#1a1a1a;font-size:12px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:4px}
/* Badge "VISTO" (contenuto completato dall'utente), in alto a destra. */
.na-thumb .na-viewed{position:absolute;right:8px;top:8px;z-index:4;display:inline-flex;align-items:center;gap:4px;background:var(--na-accent2,#1a7d3c);color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;line-height:1;padding:4px 8px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.na-thumb .na-viewed .na-viewed-tick{font-size:11px;line-height:1}
/* I pulsanti preferito/playlist scendono per non finire sotto il badge "VISTO". */
.na-card.is-viewed .na-fav{top:42px}
.na-card.is-viewed .na-plus{top:80px}
.na-fav{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);border:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,transform .15s}
.na-fav:hover{background:rgba(0,0,0,.8);transform:scale(1.08)}
.na-fav.is-fav{color:var(--na-danger);opacity:1}
.na-plus{position:absolute;right:8px;top:46px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);border:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,transform .15s}
.na-plus:hover{background:var(--na-accent);transform:scale(1.08)}
.na-card:hover .na-fav,.na-card:hover .na-plus{opacity:1}
@media(hover:none){.na-fav,.na-plus{opacity:1}}
.na-cardbody{padding:14px;display:flex;flex-direction:column;gap:8px}
/* Titolo SEMPRE su 3 righe riservate (anche se corto) → card di altezza uniforme,
   titoli lunghi più leggibili. */
.na-cardbody h3{margin:0;font-size:16px;line-height:1.35;color:var(--na-text);transition:color .15s;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.05em}
.na-card:hover .na-cardbody h3{color:var(--na-accent2)}
.na-meta{display:flex;flex-wrap:wrap;gap:6px}
/* Nelle card i tag (tutte le tematiche, livello, anno) si mostrano per intero e
   vanno a capo se non stanno su una riga: la card cresce in altezza e, poiché
   griglie (grid) e fasce (flex) allineano le card in "stretch", tutte le card
   della stessa riga si allungano insieme senza sfalsare il layout. */
.na-cardbody .na-meta{align-content:flex-start;min-height:23px}
.na-cardbody .na-meta .na-tag{display:inline-block;white-space:nowrap;vertical-align:top}
.na-tag{font-size:12px;color:var(--na-muted);background:var(--na-bg2);border:1px solid var(--na-line);padding:2px 8px;border-radius:999px}
.na-tag.liv{color:var(--na-accent2);border-color:rgba(55,184,95,.4)}

.na-empty,.na-loading{padding:50px;text-align:center;color:var(--na-muted)}
.na-more{display:flex;justify-content:center;padding:10px 0 20px}

/* Stati vuoto / errore (occupano tutta la riga della griglia). */
.na-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;text-align:center;color:var(--na-muted)}
.na-state-ic{font-size:38px;opacity:.85}
.na-state p{margin:0;font-size:15px}

/* Skeleton di caricamento. */
.na-skel{pointer-events:none}
.na-skel-box,.na-skel-line{position:relative;overflow:hidden;background:var(--na-card2)}
.na-skel-box::after,.na-skel-line::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:na-shimmer 1.2s infinite}
.na-skel .na-skel-line{height:12px;border-radius:6px;margin:0 0 10px}
.na-skel .na-skel-line.short{width:55%}
@keyframes na-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.na-skel-box::after,.na-skel-line::after{animation:none}.na-thumb img,.na-card{transition:none}}

/* Catalogo — responsive barra filtri + griglia. */
@media(max-width:640px){
	.na-filters{gap:8px}
	.na-search{min-width:100%;order:-1}
	.na-sortbar{margin-left:0;width:100%;justify-content:space-between}
	.na-dd>button{padding:8px 12px;font-size:13px}
	.na-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
	.na-cardbody{padding:10px}
	.na-cardbody h3{font-size:14px}
}

.na-btn{background:var(--na-accent);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer;font-size:14px;text-decoration:none;display:inline-block}
.na-btn:hover{background:var(--na-accent2);color:#fff}
.na-btn.ghost{background:transparent;border:1px solid var(--na-line);color:var(--na-text)}
.na-btn.ghost:hover{background:transparent;border-color:var(--na-accent2);color:var(--na-accent2)}
.na-btn:active{transform:translateY(1px)}

/* ---------- Micro-interazioni: toast ---------- */
.na-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.na-toast{background:var(--na-card2);color:var(--na-text);font-family:var(--na-font);border:1px solid var(--na-line);border-left:3px solid var(--na-accent2);border-radius:8px;padding:10px 16px;font-size:14px;box-shadow:var(--na-shadow-pop);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
.na-toast.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.na-toast{transition:opacity .2s ease}}

/* ---------- Scheda singola ---------- */
/* Riduce il vuoto verticale in cima: il padding-top di #content-wrap
   (default OceanWP, 50px) è compresso su TUTTE le viste Academy, non solo sulla
   scheda video. La classe body 'na-fullbleed' è aggiunta dal child theme
   (functions.php: na_body_class) a ogni vista Academy, incluse le pagine con
   shortcode (tematiche, percorsi, eventi, webinar...). */
body.na-fullbleed #content-wrap{padding-top:12px}
.na-single{background:var(--na-bg);width:100%;padding:8px 0 60px;min-height:60vh}
.na-single *{box-sizing:border-box}
.na-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--na-radius);overflow:hidden;border:1px solid var(--na-line);background:#000;box-shadow:var(--na-shadow-card)}
.na-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.na-lock{aspect-ratio:16/9;width:100%;border-radius:var(--na-radius);border:1px solid var(--na-line);background:repeating-linear-gradient(45deg,#15181f,#15181f 12px,#171b23 12px,#171b23 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--na-muted);font-size:16px;gap:10px;text-align:center;padding:20px}
.na-lock-ic{font-size:36px;opacity:.9;line-height:1}
.na-lock-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.na-single h1{font-size:32px;font-weight:700;letter-spacing:-.4px;line-height:1.1;margin:20px 0 10px}
/* Intestazione sopra il video: briciole, occhiello, titolo, pillole, azioni. */
.na-single-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding:6px 0 20px}
.na-single-head-main{display:flex;flex-direction:column;gap:9px;min-width:0;flex:1 1 560px}
.na-single-head h1{margin:2px 0 0;font-size:34px;line-height:1.12}
.na-single-head .na-actions{margin:0;flex:none}
.na-crumbs{font-size:13px;color:var(--na-muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.na-crumbs a{color:var(--na-muted);text-decoration:none}
.na-crumbs a:hover{color:var(--na-accent2)}
.na-crumbs-sep{opacity:.6}
.na-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13.5px;color:#c8d2dc}
.na-kicker-tipo{background:#475569;color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:4px}
.na-kicker-tipo[data-tipo="webinar"]{background:#006734}
.na-kicker-tipo[data-tipo="workshop"]{background:#234577}
.na-kicker-tipo[data-tipo="gruppo-di-lavoro"]{background:#2F5C9E}
.na-kicker-tipo[data-tipo="netcomm-forum"],.na-kicker-tipo[data-tipo="netcomm-focus"]{background:#13927A}
.na-single-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:16px}
.na-single-tags-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.na-single-tags-lbl{font-size:13px;color:var(--na-muted);margin-right:2px}
.na-single-tags a.na-tag{text-decoration:none;color:#c8d2dc}
.na-single-tags a.na-tag:hover{border-color:var(--na-accent2);color:var(--na-accent2)}
.na-single-head .na-evento-link{margin:0}
.na-single .na-layout{margin-top:20px}
.na-single .na-meta{margin-bottom:4px;gap:16px 20px;align-items:flex-start}
.na-single .na-meta-group{display:flex;flex-direction:column;gap:5px}
.na-single .na-meta-cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--na-muted)}
.na-single .na-meta-vals{display:flex;flex-wrap:wrap;gap:6px}
.na-layout{display:block;margin-top:18px}
.na-layout.na-has-aside{display:grid;grid-template-columns:1fr 320px;gap:28px}
.na-desc{color:#cdd3de;line-height:1.7;font-size:15.5px}
.na-desc p{margin:0 0 1em}
.na-aside{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:18px;align-self:start;position:sticky;top:20px}
.na-aside h4{margin:0 0 12px;font-size:13px;color:var(--na-muted);text-transform:uppercase;letter-spacing:.6px}
.na-att{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--na-line);border-radius:var(--na-radius-sm);margin-bottom:8px;background:var(--na-bg2);color:inherit;text-decoration:none;transition:border-color var(--na-transition),background var(--na-transition)}
.na-att:hover{border-color:var(--na-accent);background:var(--na-card2)}
.na-att .na-ic{width:38px;height:38px;flex:none;border-radius:8px;background:var(--na-card2);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background var(--na-transition)}
.na-att:hover .na-ic{background:rgba(26,125,60,.25)}
.na-att small{color:var(--na-muted);display:block}
.na-att>span:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.na-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.na-gate{margin-top:18px;padding:24px;border:1px dashed var(--na-accent);border-radius:var(--na-radius);background:rgba(26,125,60,.08);text-align:center}
.na-gate h3{margin:0 0 8px}
.na-gate p{color:var(--na-muted);margin:0 auto 16px;max-width:520px}

/* Blocco "Sintesi del contenuto": testo AI + PDF scaricabile, sotto la
   descrizione. Bordo sfumato viola→blu con angoli arrotondati (doppio
   background: padding-box per il fondo, border-box per la sfumatura). */
.na-sintesi{margin:22px 0 6px;padding:20px;border:2px solid transparent;border-radius:16px;background:linear-gradient(var(--na-card),var(--na-card)) padding-box,linear-gradient(135deg,#8b5cf6,#3b82f6) border-box}
.na-sintesi-title{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:16px;font-weight:700;color:var(--na-text);text-transform:none;letter-spacing:0}
.na-sintesi-ic{flex:none;display:block}
.na-sintesi-text{color:#cdd3de;line-height:1.7;font-size:15.5px}
.na-sintesi-text p{margin:0 0 1em}
.na-sintesi-text p:last-child{margin-bottom:0}
/* PDF della sintesi nel pannello Materiali: riquadro icona con tinta viola. */
.na-att-sintesi .na-ic{background:rgba(139,92,246,.14)}
.na-att-sintesi:hover .na-ic{background:rgba(139,92,246,.26)}

/* Blocco "Docente / Relatore": sotto la descrizione, in evidenza. */
.na-docenti{margin:22px 0 6px;padding-top:18px;border-top:1px solid var(--na-line)}
.na-docenti-titolo{margin:0 0 12px;font-size:13px;color:var(--na-muted);text-transform:uppercase;letter-spacing:.5px}
.na-docenti-list{display:flex;flex-wrap:wrap;gap:14px 26px}
.na-docente{display:flex;align-items:center;gap:16px}
.na-docente-foto{width:80px;height:80px;border-radius:50%;overflow:hidden;flex:none;background:#10201a;border:2px solid var(--na-accent);display:flex;align-items:center;justify-content:center}
.na-docente-foto img{width:100%;height:100%;object-fit:cover;display:block}
.na-docente-ph{background:linear-gradient(135deg,var(--na-accent),#0f2e1c);color:#fff;font-weight:700;font-size:26px;letter-spacing:.5px}
.na-docente-info{display:flex;flex-direction:column;gap:3px}
.na-docente-nome{font-size:16px;font-weight:700;color:var(--na-text)}
.na-docente-azienda{font-size:13px;font-weight:400;color:var(--na-muted)}
.na-docente-ruolo{align-self:flex-start;margin-top:3px;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--na-accent-ink,#fff);background:var(--na-accent);padding:2px 8px;border-radius:999px}
.na-docente-link{text-decoration:none;border-radius:8px;padding:4px;margin:-4px;transition:background .15s ease}
.na-docente-link:hover{background:rgba(255,255,255,.06)}
.na-docente-link:hover .na-docente-nome{color:var(--na-accent)}

/* Sezioni in fondo alla scheda: Episodi + Contenuti correlati. */
.na-single .na-episodi,.na-single .na-related{margin-top:34px;padding-top:22px;border-top:1px solid var(--na-line)}
.na-epi-perc{font-size:14px;font-weight:600;color:var(--na-accent2);text-decoration:none}
.na-epi-perc:hover{text-decoration:underline}
.na-share.is-copied{background:var(--na-accent);color:#fff;border-color:var(--na-accent)}

@media(max-width:860px){.na-layout.na-has-aside{grid-template-columns:1fr}.na-aside{position:static}}
@media(max-width:640px){.na-single h1,.na-single-head h1{font-size:25px}.na-single-head .na-actions{width:100%}}

/* ---------- Popover "Aggiungi a playlist" ---------- */
.na-pop{position:absolute;z-index:9999;min-width:240px;max-width:300px;background:var(--na-card2);color:var(--na-text);border:1px solid var(--na-line);border-radius:10px;padding:8px;box-shadow:var(--na-shadow-pop);font-family:inherit;animation:na-pop-in .14s ease}
@keyframes na-pop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.na-pop{animation:none}}
.na-pop-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#9aa3b2;padding:4px 6px}
.na-pop-list{max-height:200px;overflow:auto;margin-bottom:6px}
.na-pop-item{display:block;width:100%;text-align:left;background:transparent;border:0;color:#f2f4f8;padding:8px;border-radius:6px;cursor:pointer;font-size:14px}
.na-pop-item:hover{background:rgba(255,255,255,.06)}
.na-pop-item small{color:#9aa3b2}
.na-pop-empty,.na-pop-load{color:#9aa3b2;padding:8px;font-size:13px}
.na-pop-new{display:flex;gap:6px;border-top:1px solid #2a2f3a;padding-top:8px}
.na-pop-new input{flex:1;background:#15181f;border:1px solid #2a2f3a;color:#f2f4f8;border-radius:6px;padding:7px 8px;font-size:13px}
.na-pop-new button{background:#1a7d3c;color:#fff;border:0;border-radius:6px;padding:7px 12px;cursor:pointer}

/* ---------- Pagina playlist ---------- */
.na-pl-create{display:flex;gap:8px;padding:12px 0 18px;max-width:480px}
.na-pl-create input{flex:1;background:var(--na-card);border:1px solid var(--na-line);color:var(--na-text);border-radius:8px;padding:9px 12px}
.na-pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.na-pl-card{position:relative;background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.na-pl-card:hover{transform:translateY(-3px);border-color:var(--na-accent);box-shadow:var(--na-shadow-card)}
.na-pl-card:hover .na-cardbody h3{color:var(--na-accent2)}
.na-pl-card:focus-visible{outline:none;box-shadow:var(--na-focus)}
.na-pl-cardtools{position:absolute;top:8px;right:8px;z-index:3;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.na-pl-card:hover .na-pl-cardtools,.na-pl-card:focus-within .na-pl-cardtools{opacity:1}
.na-pl-cardtools button{background:rgba(13,15,19,.72);border:1px solid var(--na-line);color:var(--na-text);border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:13px;line-height:1}
.na-pl-cardtools button:hover{border-color:var(--na-accent2)}
@media(hover:none){.na-pl-cardtools{opacity:1}}
.na-pl-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1d3b2a,#10201a)}
.na-pl-thumb img{width:100%;height:100%;object-fit:cover}
.na-pl-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:#37b85f}
.na-pl-actions{display:flex;gap:6px;align-items:center;margin-top:8px}
.na-pl-actions .na-btn{padding:6px 12px;font-size:13px}
.na-pl-rename,.na-pl-del{background:transparent;border:1px solid var(--na-line);color:var(--na-text);border-radius:6px;padding:6px 9px;cursor:pointer}
.na-pl-title{margin:14px 0}
#na-pl-play{margin-bottom:14px}
.na-pl-items{display:flex;flex-direction:column;gap:8px;max-width:720px}
.na-pl-item{display:flex;align-items:center;gap:12px;background:var(--na-card);border:1px solid var(--na-line);border-radius:8px;padding:8px 10px}
.na-pl-item.dragging{opacity:.5}
.na-pl-handle{cursor:grab;color:#9aa3b2;font-size:18px}
.na-pl-itimg{width:80px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#10201a;flex:none}
.na-pl-itimg img{width:100%;height:100%;object-fit:cover}
.na-pl-itlink{flex:1;color:var(--na-text);text-decoration:none;font-size:14px}
.na-pl-itlink:hover{color:var(--na-accent2)}
.na-pl-itrm{background:transparent;border:0;color:#9aa3b2;font-size:16px;cursor:pointer}
.na-pl-itrm:hover{color:#ff6b81}
/* Dettaglio percorso: griglia di card con controlli riordino/rimozione. */
.na-pl-slot{position:relative}
.na-pl-slot .na-card{width:100%}
.na-pl-ctrl{position:absolute;top:8px;left:8px;right:8px;z-index:3;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .15s;pointer-events:none}
.na-pl-slot:hover .na-pl-ctrl,.na-pl-slot:focus-within .na-pl-ctrl{opacity:1}
.na-pl-pos{margin-right:auto;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:var(--na-accent);color:#fff;border-radius:6px;font-size:13px;font-weight:700}
.na-pl-ctrl button{pointer-events:auto;background:rgba(13,15,19,.75);border:1px solid var(--na-line);color:var(--na-text);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.na-pl-ctrl button:hover{border-color:var(--na-accent2)}
.na-pl-ctrl button:disabled{opacity:.35;cursor:not-allowed}
.na-pl-ctrl .na-pl-rm{color:var(--na-danger);font-size:17px}
@media(hover:none){.na-pl-ctrl{opacity:1}}
/* Barra di riproduzione in sequenza del percorso. */
.na-seqbar{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--na-card2);border-top:1px solid var(--na-line);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.na-seqbar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 18px}
.na-seqbar-meta{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:30%;flex:none}
.na-seqbar-tag{font-weight:700;color:var(--na-text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.na-seqbar-pos{color:var(--na-muted);font-size:12px;white-space:nowrap}
.na-seqbar-next{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-seqbar-lbl{color:var(--na-muted)}
.na-seqbar-title{color:var(--na-text);font-weight:600}
.na-seqbar-actions{display:flex;gap:8px;flex:none}
.na-seqbar-actions .na-btn{white-space:nowrap;padding:8px 14px;font-size:13px}
@media(max-width:760px){
	.na-seqbar-in{flex-wrap:wrap;gap:8px 14px;padding:10px 14px}
	.na-seqbar-meta{max-width:100%;flex-basis:100%}
	.na-seqbar-next{flex-basis:100%;order:2}
	.na-seqbar-actions{order:3;width:100%;justify-content:flex-end}
	.na-seqbar-actions .na-btn{flex:1;text-align:center}
}
/* Dettaglio percorso: intestazione + pannello "Aggiungi contenuti". */
.na-pl-dhead{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.na-pl-dtitle{flex:1;min-width:200px}
.na-pl-dhead .na-pl-title{margin:0;font-size:22px}
.na-pl-dmeta{color:var(--na-muted);font-size:14px;margin-top:4px}
.na-pl-dactions{display:flex;gap:8px;flex-wrap:wrap}
.na-pl-addpanel{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:14px;margin:0 0 18px}
.na-pl-search{display:flex;align-items:center;gap:8px;color:var(--na-muted)}
.na-pl-search input{flex:1;background:var(--na-bg2);border:1px solid var(--na-line);color:var(--na-text);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit}
.na-pl-results{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.na-pl-rload{color:var(--na-muted);font-size:14px;padding:8px 2px}
.na-pl-rrow{display:flex;align-items:center;gap:12px;background:var(--na-bg2);border:1px solid var(--na-line);border-radius:8px;padding:6px 10px}
.na-pl-rimg{width:72px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#10201a;flex:none}
.na-pl-rimg img{width:100%;height:100%;object-fit:cover}
.na-pl-rtitle{flex:1;min-width:0;color:var(--na-text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-pl-radd{flex:none;padding:6px 12px;font-size:13px}
.na-pl-radded{flex:none;color:var(--na-accent2);font-size:13px;font-weight:600}

/* ---------- Home (hero + In evidenza) ---------- */
.na-hero-home{position:relative;overflow:hidden;background:radial-gradient(1100px 460px at 12% -20%,rgba(26,125,60,.45),transparent 60%),linear-gradient(135deg,#0f2e1c 0%,#0d0f13 65%);border-bottom:1px solid var(--na-line);padding:90px 0 64px}
.na-hero-home h1{font-size:48px;line-height:1.05;letter-spacing:-.5px;margin:0 0 14px}
.na-home .na-hero-home h1{max-width:16ch}
.na-hero-home p{color:#c8d2dc;font-size:18px;max-width:620px;margin:0 0 24px;line-height:1.5}
/* Hero con copertina (es. singolo percorso): immagine sotto, overlay scuro per leggibilità. */
.na-hero-cover{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---------- Hero slider (home) ---------- */
/* Le slide sono impilate nella stessa cella della griglia: lo slider è alto quanto
   la slide più alta e l'altezza NON cambia passando da una slide all'altra. Le
   slide non attive restano nel layout ma invisibili e non interagibili. */
.na-hero-slider{position:relative;overflow:hidden;border-bottom:1px solid var(--na-line);display:grid}
.na-hero-slider .na-hslide{grid-area:1/1;visibility:hidden;pointer-events:none}
.na-hero-slider .na-hslide.is-active{visibility:visible;pointer-events:auto}
/* Titolo delle slide SEMPRE su una riga: niente limite in caratteri (altrimenti
   "Consorzio Netcomm" andava a capo) e nessun a-capo; se a corpo pieno non ci
   sta, hero.js riduce il corpo fino a un minimo. */
.na-hero-slider .na-hero-home h1{max-width:none;white-space:nowrap}
/* le singole slide riusano lo stile .na-hero-home ma senza il bordo (lo dà il wrapper) */
.na-hero-slider .na-hero-home{border-bottom:0}
.na-hero-slider:not(.na-anim-off) .na-hslide.is-active{animation:na-hfade .55s ease}
@keyframes na-hfade{from{opacity:.3}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.na-hero-slider .na-hslide.is-active{animation:none}}
/* Controlli: frecce + dots raggruppati in basso al centro (‹ • • • ›), dentro
   il padding inferiore della slide, così non coprono mai titolo e testo. */
.na-hero-controls{position:absolute;left:0;right:0;bottom:14px;display:flex;align-items:center;justify-content:center;gap:14px;z-index:6;pointer-events:none}
.na-hero-controls > *{pointer-events:auto}
.na-hero-arrow{width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(13,15,19,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.na-hero-arrow:hover{background:rgba(13,15,19,.85);border-color:var(--na-accent2)}
.na-hero-arrow:focus-visible,.na-hero-dot:focus-visible{outline:0;box-shadow:var(--na-focus)}
/* Dots */
.na-hero-dots{display:flex;justify-content:center;gap:9px}
.na-hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:background .15s,transform .15s}
.na-hero-dot.is-active{background:#fff;transform:scale(1.2)}
/* spazio sotto il contenuto per la barra dei controlli */
.na-hero-slider .na-hero-home{padding-bottom:76px}
@media(max-width:640px){.na-hero-slider .na-hero-home{padding-bottom:64px}.na-hero-arrow{width:32px;height:32px;font-size:20px}}

.na-section-title{font-size:22px;font-weight:700;letter-spacing:-.2px;margin:34px 0 14px}
.na-featured{margin-top:6px}
.na-row{display:flex;gap:16px;overflow-x:auto;padding:4px 0 12px;scroll-snap-type:x mandatory}
.na-row .na-card{flex:0 0 300px;scroll-snap-align:start}
.na-row::-webkit-scrollbar{height:8px}
.na-row::-webkit-scrollbar-thumb{background:var(--na-line);border-radius:4px}

/* Slider docenti: 3 righe COMPATTE e SFALSATE (a mattoncino) che scorrono
   insieme orizzontalmente. Badge ridotti (foto tonda + nome + azienda). */
.na-row-docenti{flex-direction:column;align-items:flex-start;gap:10px;scroll-snap-type:none}
.na-row-docenti .na-drow{display:flex;gap:12px;flex:0 0 auto}
.na-row-docenti .na-drow:nth-child(2){margin-left:80px}   /* riga centrale sfalsata */
.na-row-docenti .na-docente{flex:0 0 auto;margin:0;padding:7px 12px;gap:10px;background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius)}
.na-row-docenti .na-docente-link:hover{background:var(--na-card2);border-color:var(--na-accent)}
.na-row-docenti .na-docente-foto{width:44px;height:44px;border-width:2px}
.na-row-docenti .na-docente-ph{font-size:15px}
.na-row-docenti .na-docente-info{min-width:0;max-width:170px}
.na-row-docenti .na-docente-nome{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.na-row-docenti .na-docente-azienda{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
@media(max-width:640px){.na-row-docenti .na-drow:nth-child(2){margin-left:46px}}

/* Slider loghi: 3 righe COMPATTE e SFALSATE (a mattoncino), come i docenti.
   Tessere chiare cliccabili; logo grande nella tile (poco spazio bianco). */
.na-row-loghi{flex-direction:column;align-items:flex-start;gap:12px;scroll-snap-type:none}
.na-row-loghi .na-drow{display:flex;gap:12px;flex:0 0 auto}
.na-row-loghi .na-drow:nth-child(2){margin-left:80px}   /* riga centrale sfalsata */
.na-logo{flex:0 0 auto;width:160px;height:60px;background:#fff;border-radius:var(--na-radius);display:flex;align-items:center;justify-content:center;padding:6px 12px;text-decoration:none;transition:transform .15s,box-shadow .15s}
a.na-logo:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.na-logo img{max-width:92%;max-height:46px;object-fit:contain;display:block}
@media(max-width:640px){.na-row-loghi .na-drow:nth-child(2){margin-left:46px}.na-logo{width:136px;height:54px;padding:6px 10px}.na-logo img{max-height:40px}}

/* Pagine archivio "Scoprili tutti" (docenti / aziende): griglie a wrap (no slider). */
.na-grid-docenti,.na-grid-loghi{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0 26px}
.na-grid-docenti .na-docente{flex:0 0 auto;padding:7px 12px;gap:10px;background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius)}
.na-grid-docenti .na-docente-link:hover{background:var(--na-card2);border-color:var(--na-accent)}
.na-grid-docenti .na-docente-foto{width:44px;height:44px;border-width:2px}
.na-grid-docenti .na-docente-ph{font-size:15px}
.na-grid-docenti .na-docente-info{min-width:0;max-width:170px}
.na-grid-docenti .na-docente-nome{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.na-grid-docenti .na-docente-azienda{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
/* Pulsante "Scoprili tutti" sotto gli slider home. */
.na-row-cta{padding:8px 0 2px}
/* Slider docenti / loghi Soci: titolo e pulsante centrati. */
.na-docenti-slider .na-section-title,.na-loghi-slider .na-section-title{text-align:center}
.na-docenti-slider .na-row-cta,.na-loghi-slider .na-row-cta{text-align:center}

/* Top 10 "alla Netflix": numero grande outline accent + copertina orizzontale. */
.na-row-top10{align-items:center}
.na-row-top10 .na-top10-item{flex:0 0 auto;display:flex;align-items:center;scroll-snap-align:start}
.na-row-top10 .na-top10-item .na-card{flex:0 0 280px}
.na-row-top10 .na-rank{
	font-size:140px;line-height:.8;font-weight:800;letter-spacing:normal;
	color:var(--na-accent);    /* riempimento verde pieno: nessun problema di bordi */
	margin:0 -8px 0 8px;         /* sovrapposizione lieve: i numeri restano ben visibili */
	user-select:none;flex:0 0 auto;white-space:nowrap;
}
@media(max-width:640px){
	.na-row-top10 .na-rank{font-size:96px;margin:0 -6px 0 6px}
	.na-row-top10 .na-top10-item .na-card{flex-basis:62%}
}

/* Caroselli con frecce (aggiunte via JS). */
.na-carousel{position:relative}
.na-arrow{position:absolute;top:0;bottom:14px;width:52px;border:0;cursor:pointer;color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:5;opacity:0;transition:opacity .15s,color .15s}
.na-carousel:hover .na-arrow{opacity:1}
.na-arrow:focus-visible{opacity:1}
.na-arrow:hover{color:var(--na-accent2)}
.na-arrow.prev{left:0;justify-content:flex-start;padding-left:6px;background:linear-gradient(to right,rgba(13,15,19,.92),rgba(13,15,19,0))}
.na-arrow.next{right:0;justify-content:flex-end;padding-right:6px;background:linear-gradient(to left,rgba(13,15,19,.92),rgba(13,15,19,0))}
.na-arrow.is-hidden{display:none}
.na-carousel.no-scroll .na-arrow{display:none}
@media(hover:none){.na-arrow{display:none}}

@media(max-width:640px){.na-hero-home{padding:60px 0 44px}.na-hero-home h1{font-size:32px}.na-hero-home p{font-size:16px}.na-row .na-card{flex-basis:78%}}

/* ---------- Percorsi ---------- */
.na-hero-desc{color:#c8d2dc;line-height:1.6;max-width:760px;font-size:16.5px}
.na-hero-desc p{margin:0 0 10px}
.na-percorso-card .na-thumb{background:linear-gradient(135deg,#143a4f,#0d0f13)}
.na-percorso-card .na-tipo{background:rgba(20,58,79,.95)}
.na-perc-desc{color:var(--na-muted);font-size:13px;line-height:1.45;margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-percorso-single .na-grid{padding-top:24px}
.na-perc-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 4px;color:var(--na-muted);font-size:15px}
.na-perc-meta-item{display:inline-flex;align-items:center;gap:6px}
.na-perc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.na-evento-card .na-thumb{background:linear-gradient(135deg,#3a2a4f,#0d0f13)}
.na-evento-card .na-tipo{background:rgba(58,42,79,.95)}
.na-evento-single .na-grid{padding-top:24px}
.na-evento-link{margin:6px 0 0;font-size:14px;color:var(--na-muted)}
.na-evento-link-lbl{opacity:.8}
.na-evento-link a{color:#b794d6;text-decoration:none;font-weight:600}
.na-evento-link a:hover{text-decoration:underline}
.na-percorso-link a{color:#5fb0c9}

/* ---------- 404 brandizzata ---------- */
.na-404{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;gap:6px}
.na-404-code{font-size:88px;font-weight:800;letter-spacing:-2px;line-height:1;background:linear-gradient(135deg,var(--na-accent2),var(--na-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.na-404 h1{font-size:26px;margin:6px 0 4px}
.na-404 p{color:var(--na-muted);margin:0 0 18px}
.na-404-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ==========================================================================
   L8 — Responsive & mobile
   ========================================================================== */
@media(max-width:640px){
	.na-single{padding:6px 0 48px}
	/* Filtri: pannello a tendina come "bottom-sheet" (niente overflow laterale). */
	.na-panel.open{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;min-width:0;max-width:none;max-height:62vh;border-radius:16px 16px 0 0;z-index:9999;box-shadow:0 -12px 40px rgba(0,0,0,.6)}
	/* Azioni scheda: a piena larghezza per tap comodo. */
	.na-actions .na-btn{flex:1 1 auto;text-align:center}
	/* Playlist: una colonna. */
	.na-pl-grid{grid-template-columns:1fr}
	/* Materiali: niente sticky su mobile. */
	.na-aside{position:static}
}

/* Dispositivi touch: aree di tocco più ampie per i pulsanti sulle card. */
@media(hover:none){
	.na-fav,.na-plus{width:40px;height:40px;font-size:18px}
	.na-plus{top:54px;font-size:22px}
}

/* ==========================================================================
   Fascia FAQ (home) — accordion nativo <details>
   ========================================================================== */
.na-faq{scroll-margin-top:90px} /* l'ancora #faq non finisce sotto l'header sticky */
.na-faq .na-section-title{text-align:center}
.na-faq .na-faq-list{max-width:820px;margin:6px auto 0;display:flex;flex-direction:column;gap:10px}
.na-faq-item{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius-sm);overflow:hidden}
.na-faq-item[open]{border-color:var(--na-accent)}
.na-faq-q{cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;color:var(--na-text);display:flex;align-items:center;justify-content:space-between;gap:12px}
.na-faq-q::-webkit-details-marker{display:none}
.na-faq-q::after{content:'+';color:var(--na-accent2);font-size:22px;line-height:1;flex:none;transition:transform var(--na-transition)}
.na-faq-item[open] .na-faq-q::after{content:'\2013'}
.na-faq-a{padding:0 18px 16px;color:var(--na-muted);line-height:1.55}
.na-faq-a p{margin:0 0 .6em}
.na-faq-a p:last-child{margin-bottom:0}

/* ==========================================================================
   Pagina statica ([na_pagina]) — es. "Chi siamo": colonna-articolo centrata
   e leggibile dentro il tema Academy.
   ========================================================================== */
.na-page .na-wrap{max-width:820px}          /* colonna articolo centrata */
.na-page .na-hero{padding:52px 0 6px}
.na-prose{margin:8px 0 40px;color:var(--na-text);font-size:17px;line-height:1.7}
.na-prose > *:first-child{margin-top:0}
.na-prose p{margin:0 0 1.1em}
.na-prose h2{font-size:26px;font-weight:700;letter-spacing:-.2px;margin:1.6em 0 .5em;line-height:1.2}
.na-prose h3{font-size:21px;font-weight:700;margin:1.4em 0 .4em;line-height:1.25}
.na-prose h4{font-size:18px;font-weight:600;margin:1.2em 0 .4em}
.na-prose a{color:var(--na-accent2);text-decoration:underline;text-underline-offset:2px}
.na-prose a:hover{color:var(--na-text)}
.na-prose strong{color:var(--na-text);font-weight:700}
.na-prose ul,.na-prose ol{margin:0 0 1.1em;padding-left:1.4em}
.na-prose li{margin:.25em 0}
.na-prose img{max-width:100%;height:auto;border-radius:var(--na-radius)}
.na-prose figure{margin:1.2em 0}
.na-prose figcaption{color:var(--na-muted);font-size:13px;margin-top:6px;text-align:center}
.na-prose blockquote{margin:1.2em 0;padding:2px 0 2px 18px;border-left:3px solid var(--na-accent);color:var(--na-muted)}
.na-prose hr{border:0;border-top:1px solid var(--na-line);margin:2em 0}
.na-prose iframe{max-width:100%}

/* ==========================================================================
   Fasce home: dimensione "Grande" (na-large) — card più grandi per dare
   movimento alla pagina.
   ========================================================================== */
.na-large .na-row .na-card{flex-basis:440px}
.na-large .na-row-top10 .na-top10-item .na-card{flex-basis:380px}
@media(max-width:640px){.na-large .na-row .na-card{flex-basis:86%}}

/* ==========================================================================
   Tessere-tematica ("Categorie"): usate sia nella fascia home (riga scorrevole)
   sia nell'indice /tematica/ (griglia 3 colonne).
   ========================================================================== */
/* Aspetto della tessera (indipendente dal contenitore). */
.na-cat-card{
	aspect-ratio:16/7;position:relative;display:flex;align-items:flex-end;
	border:1px solid var(--na-line);border-radius:var(--na-radius);overflow:hidden;
	background:var(--na-card2) center/cover no-repeat;text-decoration:none;
	transition:transform .15s,box-shadow .15s,border-color .15s;
}
.na-cat-card.na-cat-noimg{background:linear-gradient(135deg,#1d3b2a,#10201a)}
a.na-cat-card:hover{transform:translateY(-4px);box-shadow:var(--na-shadow-card);border-color:var(--na-accent)}
.na-cat-label{position:relative;z-index:1;color:#fff;font-weight:600;font-size:20px;line-height:1.2;padding:18px 20px}
/* Tessera con abstract (indice /tematica/): nome + descrizione breve su 2 righe,
   con una sfumatura scura in basso per la leggibilità sopra l'immagine. */
.na-cat-card.has-desc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,19,0) 30%,rgba(13,15,19,.88) 100%);pointer-events:none}
.na-cat-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:18px 20px;width:100%}
.na-cat-text .na-cat-label{padding:0}
.na-cat-desc{color:#c8d2dc;font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Fascia home: riga orizzontale scorrevole. */
.na-row-cat .na-cat-card{flex:0 0 340px;scroll-snap-align:start}
.na-large .na-row-cat .na-cat-card{flex-basis:460px}
@media(max-width:640px){.na-row-cat .na-cat-card{flex-basis:80%}.na-large .na-row-cat .na-cat-card{flex-basis:86%}}

/* Indice /tematica/: griglia a 3 colonne. */
.na-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:18px 0 28px}
@media(max-width:900px){.na-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.na-cat-grid{grid-template-columns:1fr}}

/* ---- "Crea il mio percorso" (wizard) -------------------------------- */
#na-crea-app{max-width:760px;margin:8px auto 0}
.na-wz-steps{display:flex;gap:10px;justify-content:center;margin:6px 0 26px}
.na-wz-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--na-card2);color:var(--na-muted);border:1px solid var(--na-line)}
.na-wz-dot.is-active{background:var(--na-accent);color:#fff;border-color:var(--na-accent)}
.na-wz-dot.is-done{background:rgba(26,125,60,.18);color:var(--na-accent2);border-color:var(--na-accent)}
.na-wz-title{margin:0 0 6px;font-size:24px;font-weight:700;color:var(--na-text);text-align:center}
.na-wz-help{margin:0 auto 20px;max-width:560px;color:var(--na-muted);font-size:15px;text-align:center}
.na-wz-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 26px}
.na-wz-chip{background:var(--na-card2);border:1px solid var(--na-line);color:var(--na-text);border-radius:var(--na-radius-pill);padding:9px 16px;font-size:14px;font-family:inherit;cursor:pointer;transition:all .15s}
.na-wz-chip:hover{border-color:var(--na-accent2)}
.na-wz-chip.is-on{background:var(--na-accent);border-color:var(--na-accent);color:#fff;font-weight:600}
.na-wz-chip:disabled{opacity:.4;cursor:not-allowed}
.na-wz-chip:disabled:hover{border-color:var(--na-line)}
.na-wz-nav{display:flex;align-items:center;gap:12px;margin-top:8px}
.na-wz-spacer{flex:1}
.na-wz-nav .na-btn:disabled{opacity:.45;cursor:not-allowed}
/* Anteprima: lista ordinabile. */
.na-wz-list{list-style:none;counter-reset:wz;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.na-wz-row{display:flex;align-items:center;gap:12px;background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius-sm);padding:8px 10px}
.na-wz-row::before{counter-increment:wz;content:counter(wz);width:22px;text-align:center;color:var(--na-muted);font-weight:700;font-size:13px;flex:none}
.na-wz-th{width:64px;height:38px;border-radius:6px;background:var(--na-bg2) center/cover no-repeat;flex:none}
.na-wz-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.na-wz-t{color:var(--na-text);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-wz-sub{color:var(--na-muted);font-size:12px}
.na-wz-ctrl{display:flex;align-items:center;gap:4px;flex:none}
.na-wz-mv,.na-wz-rm{background:var(--na-card2);border:1px solid var(--na-line);color:var(--na-text);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit}
.na-wz-mv:hover,.na-wz-rm:hover{border-color:var(--na-accent2)}
.na-wz-mv:disabled{opacity:.35;cursor:not-allowed}
.na-wz-rm{color:var(--na-danger);font-size:18px}
.na-wz-save{display:flex;gap:10px;margin:0 0 18px}
.na-wz-name{flex:1;background:var(--na-card);border:1px solid var(--na-line);color:var(--na-text);border-radius:var(--na-radius-sm);padding:10px 14px;font-size:14px;font-family:inherit}
.na-wz-done{text-align:center;padding:24px 0}
.na-wz-done .na-wz-nav{justify-content:center}
@media(max-width:600px){
	.na-wz-title{font-size:20px}
	.na-wz-save{flex-direction:column}
	.na-wz-th{display:none}
}

/* ==========================================================================
   Documenti — libreria di sintesi AI e slide (una riga per contenuto).
   ========================================================================== */
.na-documenti .na-hero{padding-top:24px}
.na-documenti .na-hero p{max-width:none}
@media(min-width:960px){.na-documenti .na-hero p{white-space:nowrap}}
.na-doc-tags{gap:8px 18px}
.na-doc-tags-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.na-doc-tags-lbl{font-size:12.5px;color:var(--na-muted)}
.na-doc-meta-lbl{color:var(--na-muted)}
/* Badge cliccabili (aggiungono il filtro). */
button.na-tag-filter{font-family:inherit;line-height:inherit;cursor:pointer;transition:border-color var(--na-transition),color var(--na-transition),background var(--na-transition)}
button.na-tag-filter:hover{border-color:var(--na-accent2);color:var(--na-accent2)}
button.na-tag-filter.is-active{border-color:var(--na-accent);background:rgba(26,125,60,.18);color:var(--na-text);cursor:default}
button.na-tag-filter:focus-visible{outline:0;box-shadow:var(--na-focus)}
/* Link al video nel corpo della riga (la colonna file resta solo per i file). */
.na-doc-videolink{align-self:flex-start;font-size:13px;font-weight:600;color:var(--na-accent2);text-decoration:none}
.na-doc-videolink:hover{text-decoration:underline}
.na-doc-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:4px;font-variant-numeric:tabular-nums}
.na-doc-stat{display:inline-flex;align-items:baseline;gap:8px}
.na-doc-stat b{font-family:var(--na-font-head);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--na-text)}
.na-doc-stat span{color:var(--na-muted);font-size:14px}
.na-doc-stat i{width:10px;height:10px;border-radius:3px;align-self:center;display:inline-block}
.na-doc-stat i.sintesi{background:linear-gradient(135deg,#8b5cf6,#3b82f6)}
.na-doc-stat i.slide{background:#13927A}
/* Avviso per chi non ha accesso pieno. */
.na-doc-notice{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0 2px;padding:14px 16px;border:1px solid var(--na-line);border-left:4px solid #f5c518;border-radius:var(--na-radius-sm);background:var(--na-card)}
.na-doc-notice p{margin:0;flex:1;min-width:240px;font-size:14px;color:var(--na-text)}
.na-doc-notice .na-btn{padding:8px 14px;font-size:13px}
/* Sotto-barra: segmenti "Tipo documento" + chip + contatore. */
.na-doc-subbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 0 4px}
.na-doc-subbar .na-lbl{color:var(--na-muted);font-size:13px}
.na-doc-subbar .na-chips{padding:0;min-height:0}
.na-doc-subbar .na-resultcount{margin-left:auto;padding:0}
.na-seg{display:inline-flex;border:1px solid var(--na-line);border-radius:999px;overflow:hidden;background:var(--na-card)}
.na-seg button{background:transparent;border:0;color:var(--na-muted);padding:6px 12px;font-family:inherit;font-size:13px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.na-seg button[aria-pressed="true"]{background:var(--na-accent);color:#fff}
.na-seg button:hover:not([aria-pressed="true"]){color:var(--na-text)}
.na-seg .na-seg-ic svg{display:block;width:15px;height:15px}
/* Elenco e riga. */
.na-doc-list{display:flex;flex-direction:column;gap:12px;padding:14px 0 10px}
.na-doc{display:grid;grid-template-columns:176px minmax(0,1fr) 330px;gap:18px;align-items:start;padding:14px;background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);transition:border-color var(--na-transition),box-shadow var(--na-transition),transform var(--na-transition)}
.na-doc:hover{border-color:var(--na-accent);box-shadow:var(--na-shadow-card);transform:translateY(-2px)}
.na-doc-thumb{position:relative;display:block;aspect-ratio:16/9;max-width:100%;border-radius:8px;overflow:hidden;background:var(--na-card2)}
.na-doc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.na-doc-thumb.noimg{background:linear-gradient(135deg,#1d3b2a,#10201a)}
.na-doc-thumb .na-tipo{font-size:12px;padding:3px 7px}
.na-doc-thumb .na-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:2px 6px;border-radius:4px;font-variant-numeric:tabular-nums}
.na-doc-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(0,0,0,.25);transition:opacity var(--na-transition)}
.na-doc-play::before{content:"";width:44px;height:44px;border-radius:50%;background:rgba(26,125,60,.9);grid-area:1/1}
.na-doc-play::after{content:"";width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;grid-area:1/1}
.na-doc-thumb:hover .na-doc-play{opacity:1}
.na-doc-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.na-doc-body h3{margin:0;font-size:17px;line-height:1.3;font-weight:700}
.na-doc-body h3 a{text-decoration:none;color:var(--na-text);transition:color var(--na-transition)}
.na-doc-body h3 a:hover{color:var(--na-accent2)}
.na-doc-lock{margin-left:8px;font-size:14px;vertical-align:middle}
.na-doc-meta{margin:0;color:var(--na-muted);font-size:13.5px}
.na-doc-meta b{color:var(--na-text);font-weight:500}
.na-doc-files{display:flex;flex-direction:column;gap:8px;min-width:0}
.na-docfile{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--na-line);border-radius:var(--na-radius-sm);background:var(--na-bg2);text-decoration:none;color:inherit;font-size:13px;transition:border-color var(--na-transition),background var(--na-transition)}
a.na-docfile:hover{border-color:var(--na-accent);background:var(--na-card2)}
.na-docfile-ic{width:32px;height:32px;flex:none;border-radius:7px;background:var(--na-card2);display:grid;place-items:center;font-size:16px}
.na-docfile-ic svg{display:block}
.na-docfile-txt{min-width:0;flex:1}
.na-docfile b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-docfile small{display:block;color:var(--na-muted);font-size:11.5px}
.na-docfile-dl{flex:none;color:var(--na-muted);font-size:15px}
.na-docfile.is-sintesi{border:1.5px solid transparent;background:linear-gradient(var(--na-bg2),var(--na-bg2)) padding-box,linear-gradient(135deg,#8b5cf6,#3b82f6) border-box}
a.na-docfile.is-sintesi:hover{background:linear-gradient(var(--na-card2),var(--na-card2)) padding-box,linear-gradient(135deg,#8b5cf6,#3b82f6) border-box}
.na-docfile.is-locked{opacity:.62;cursor:not-allowed}
.na-docfile.is-locked small{color:#e3c25a}
.na-doc-files .na-btn{align-self:flex-start;margin-top:2px;padding:8px 14px;font-size:13px}
.na-doc.na-skel .na-doc-thumb{border-radius:8px}
/* Link "Tutti i documenti" nella scheda (box materiali e sintesi). */
.na-att-all{display:inline-block;margin-top:6px;font-size:13px;color:var(--na-muted);text-decoration:none}
.na-att-all:hover{color:var(--na-accent2)}
@media(max-width:980px){.na-doc{grid-template-columns:140px minmax(0,1fr)}.na-doc-files{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.na-doc-files .na-docfile{flex:1 1 220px}.na-doc-files .na-btn{align-self:center}}
@media(max-width:560px){.na-doc{grid-template-columns:1fr}.na-doc-subbar .na-resultcount{margin-left:0}}

/* ---------- Percorsi: box CTA "Crea il mio percorso" ---------- */
.na-crea-cta{display:flex;align-items:center;gap:16px;margin:14px 0 6px;padding:18px 22px;border:1px solid rgba(55,184,95,.35);border-radius:var(--na-radius);background:linear-gradient(110deg,rgba(26,125,60,.22),rgba(26,125,60,.05) 70%)}
.na-crea-cta-ic{font-size:26px;line-height:1;flex:none}
.na-crea-cta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.na-crea-cta-txt strong{color:var(--na-text);font-family:var(--na-font-head);font-size:17px}
.na-crea-cta-txt span{color:var(--na-muted);font-size:14.5px;line-height:1.45}
.na-crea-cta .na-btn{flex:none}
@media(max-width:640px){.na-crea-cta{flex-wrap:wrap}.na-crea-cta .na-btn{width:100%;text-align:center}}

/* ==========================================================================
   Ritocchi dal test UX desktop (2026-10-12, plugin 1.34.0).
   ========================================================================== */
/* D-01/D-04: blocco accesso DENTRO il riquadro del video (stesso 16:9 del player). */
.na-lock{gap:12px;padding:28px 24px}
.na-lock .na-lock-title{margin:0;font-size:24px;line-height:1.2;color:var(--na-text);max-width:680px;font-family:var(--na-font-head)}
.na-lock p{margin:0;max-width:600px;color:#c8d2dc;font-size:15.5px;line-height:1.55}
.na-lock.is-free{border-color:rgba(245,197,24,.55);background:repeating-linear-gradient(45deg,#17190f,#17190f 12px,#1a1c12 12px,#1a1c12 24px)}
.na-lock-actions{margin-top:4px}
.na-lock-actions .na-btn{min-width:140px;justify-content:center}
@media(max-width:640px){.na-lock{aspect-ratio:auto;min-height:220px;padding:22px 16px}.na-lock-title{font-size:20px}.na-lock p{font-size:14.5px}}
/* D-14: badge FREE/SIGILLO accanto al titolo ma fuori dall'h1. */
.na-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.na-single-head .na-title-row h1{margin:2px 0 0}
.na-title-row .na-free-inline,.na-title-row .na-sigillo-inline{margin-left:0}
/* D-11: posizione nel percorso per chi non ha la barra JS (anonimo / senza accesso). */
.na-seqnote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 14px;padding:10px 14px;background:var(--na-card);border:1px solid var(--na-line);border-left:3px solid var(--na-accent);border-radius:var(--na-radius-sm);font-size:14px;color:#c8d2dc}
.na-seqnote a{color:var(--na-accent2);text-decoration:none}
.na-seqnote a:hover{text-decoration:underline}
.na-seqnote-pos{font-weight:700;color:var(--na-text)}
.na-seqnote-hint{color:var(--na-muted);font-size:13px;flex-basis:100%}
/* D-11: tappe numerate del percorso (numero a sinistra della card, come la Top 10). */
.na-perc-grid-head{padding-top:22px}
.na-section-sub{margin:0 0 10px;color:var(--na-muted);font-size:14px;line-height:1.45}
ol.na-perc-steps{list-style:none;margin:0;padding:12px 0 24px}
.na-perc-step{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start}
.na-step-num{width:38px;height:38px;border-radius:50%;border:2px solid var(--na-accent);color:var(--na-accent2);display:flex;align-items:center;justify-content:center;font-family:var(--na-font-head);font-weight:700;font-size:16px;margin-top:4px}
.na-perc-teaser{margin:14px 0 0;color:#c8d2dc;font-size:14.5px;line-height:1.5}
.na-perc-teaser a{color:var(--na-accent2);font-weight:600;text-decoration:none}
.na-perc-teaser a:hover{text-decoration:underline}
/* D-08: chip dei filtri e "Azzera" come pulsanti. */
button.na-chip{font-family:inherit;font-size:13px;line-height:inherit;cursor:pointer}
button.na-chip:hover{border-color:var(--na-accent2)}
button.na-chip:focus-visible,button.na-clear:focus-visible{outline:0;box-shadow:var(--na-focus)}
/* D-16: stato vuoto con suggerimento e via d'uscita. */
.na-state-hint{margin:0;font-size:14px;color:var(--na-muted);max-width:480px}
.na-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
/* D-15: link esterno nell'hero (si esce dall'Academy). */
.na-btn.is-external::after{content:"\2197";margin-left:6px;font-size:.9em}
/* D-10: pagina evento: descrizione a tutta larghezza, meno spazio sopra, riga meta e briciole. */
.na-evento-single .na-hero-home{padding:30px 0 34px}
.na-evento-single .na-hero-home h1{font-size:40px;margin:0 0 10px}
.na-evento-single .na-hero-desc{max-width:none;font-size:15px;line-height:1.6;color:#c8d2dc}
.na-evento-single .na-hero-desc p{margin:0 0 8px}
.na-evento-single .na-hero-desc p:last-child{margin-bottom:0}
.na-evento-single .na-crumbs{margin-bottom:12px}
.na-evento-meta{margin:0 0 14px}
@media(max-width:640px){.na-evento-single .na-hero-home{padding:22px 0 26px}.na-evento-single .na-hero-home h1{font-size:30px}}
/* D-14: i titoli delle slide hero sono <h2 class="na-hero-title"> (un solo h1 per pagina): stesso aspetto dell'h1 di prima. */
.na-hero-home .na-hero-title{font-size:48px;line-height:1.05;letter-spacing:-.5px;margin:0 0 14px;color:var(--na-text)}
.na-home .na-hero-home .na-hero-title{max-width:16ch}
.na-hero-slider .na-hero-home .na-hero-title{max-width:none;white-space:nowrap}
@media(max-width:640px){.na-hero-home .na-hero-title{font-size:32px}}

/* ==========================================================================
   Ritocchi dal test UX mobile (2026-10-12, plugin 1.35.0).
   ========================================================================== */
/* M-08: controlli dell'hero con area di tocco >= 44px (frecce e pallini). */
@media(max-width:640px){
	.na-hero-arrow{width:44px;height:44px;font-size:24px}
	.na-hero-dots{gap:2px}
	.na-hero-dot{position:relative;width:10px;height:10px;margin:0 8px}
	.na-hero-dot::after{content:"";position:absolute;inset:-17px -13px}
}
/* M-09: sui telefoni una sola colonna di card (copertine grandi, badge e titoli leggibili, tap comodi). */
@media(max-width:480px){
	.na-grid{grid-template-columns:1fr;gap:14px}
	.na-cardbody{padding:12px 14px}
	.na-cardbody h3{font-size:15.5px;min-height:0}
}
/* M-13: Documenti compatti su mobile: copertina piccola a sinistra, niente data/relatori/tag, Sintesi AI e Slide affiancati. */
@media(max-width:560px){
	.na-doc{grid-template-columns:104px minmax(0,1fr);gap:10px 12px;padding:12px}
	.na-doc-meta,.na-doc-tags{display:none}
	.na-doc-body{gap:6px}
	.na-doc-body h3{font-size:15px;line-height:1.3}
	.na-doc-videolink{font-size:12.5px}
	.na-doc-files{grid-column:1/-1;flex-direction:row;flex-wrap:nowrap;gap:8px}
	.na-doc-files .na-docfile{flex:1 1 0;min-width:0;padding:8px;gap:8px}
	.na-doc-files .na-docfile-ic{width:28px;height:28px;font-size:14px}
	.na-doc-files .na-docfile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.na-doc-files .na-docfile-dl{display:none}
}
/* M-15: descrizione lunga su mobile: 4 righe + "Leggi tutto" (na-header.js). */
.na-hero-desc.is-clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.na-readmore{display:inline-block;margin:6px 0 0;padding:8px 0;background:none;border:0;color:var(--na-accent2);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.na-readmore:hover{text-decoration:underline}
/* M-16/M-17: Top 10 su mobile: numero piccolo a sinistra, card al 72% della larghezza (niente card oltre il bordo). */
@media(max-width:640px){
	.na-row-top10 .na-top10-item{align-items:flex-start}
	.na-row-top10 .na-rank{font-size:40px;line-height:1;margin:14px 4px 0 0;min-width:30px;text-align:center}
	.na-row-top10 .na-top10-item .na-card{flex-basis:72%;max-width:72vw}
}
/* M-19: bottom sheet dei filtri con intestazione (nome filtro + "Fatto") e caselle piu' grandi. */
.na-panel-head{display:none}
@media(max-width:640px){
	.na-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-8px;margin:-8px -8px 6px;padding:12px 14px;background:var(--na-card2);border-bottom:1px solid var(--na-line);z-index:1}
	.na-panel-title{font-weight:700;font-size:15px;color:var(--na-text)}
	.na-panel-done{background:var(--na-accent);color:#fff;border:0;border-radius:8px;padding:8px 16px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;min-height:40px}
	.na-panel.open{padding-bottom:max(12px,env(safe-area-inset-bottom))}
	.na-panel label{padding:10px 8px;font-size:15px}
	.na-panel input[type="checkbox"]{width:22px;height:22px;flex:none;accent-color:var(--na-accent2)}
}

/* ==========================================================================
   Ritocchi dal test UX da Socio loggato (2026-10-12, plugin 1.36.0).
   ========================================================================== */
/* D-22: l'overlay "play" non deve intercettare click/tap: cuore e "+" tornano usabili. */
.na-thumb .na-play{pointer-events:none}
/* D-31: cuore e "+" visibili anche al focus da tastiera. */
.na-card:focus-within .na-fav,.na-card:focus-within .na-plus{opacity:1}
/* D-27: barra percorso riorganizzata: tre zone allineate (percorso/tappa · prossima tappa · azioni). */
.na-seqbar-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:14px 22px;padding:10px 18px}
.na-seqbar-meta{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:none}
.na-seqbar-eyebrow{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--na-muted)}
.na-seqbar-tag{font-weight:700;color:var(--na-text);font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-seqbar-pos{color:var(--na-accent2);font-size:12.5px;font-weight:600;white-space:nowrap}
.na-seqbar-next{min-width:0;font-size:13.5px;line-height:1.35;display:flex;flex-direction:column;gap:1px;white-space:normal;overflow:visible}
.na-seqbar-next .na-seqbar-lbl{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--na-muted)}
.na-seqbar-next .na-seqbar-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--na-text);font-weight:600}
.na-seqbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.na-seqbar-actions .na-btn{white-space:nowrap;padding:9px 14px;font-size:13px}
.na-seqbar-exit{color:var(--na-muted) !important;border-color:transparent !important}
.na-seqbar-exit:hover{color:var(--na-text) !important;border-color:var(--na-line) !important}
@media(max-width:760px){
	.na-seqbar-in{grid-template-columns:1fr;gap:8px;padding:10px 14px}
	.na-seqbar-next .na-seqbar-title{-webkit-line-clamp:1}
	.na-seqbar-actions{width:100%;justify-content:space-between;gap:6px}
	.na-seqbar-actions .na-btn{flex:1 1 auto;text-align:center;padding:9px 10px}
	.na-seqbar-exit{flex:0 0 auto !important}
}
/* D-28: overlay di fine video con countdown verso la tappa successiva. */
.na-next-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(13,15,19,.9);animation:na-fade-in .2s ease}
@keyframes na-fade-in{from{opacity:0}to{opacity:1}}
.na-next-card{display:flex;gap:18px;align-items:center;max-width:620px;width:100%;background:var(--na-card2);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:18px 20px;box-shadow:var(--na-shadow-pop)}
.na-next-thumb{width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}
.na-next-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.na-next-lbl{margin:0;color:var(--na-muted);font-size:13px;letter-spacing:.3px;text-transform:uppercase}
.na-next-lbl b{color:var(--na-accent2);font-size:15px}
.na-next-title{margin:0;color:var(--na-text);font-family:var(--na-font-head);font-weight:700;font-size:18px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-next-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media(max-width:640px){.na-next-card{flex-direction:column;align-items:stretch;padding:14px}.na-next-thumb{width:100%}.na-next-title{font-size:16px}.na-next-actions .na-btn{flex:1;text-align:center}}
/* D-32: toast con azione ("Riprendi da 1:29 · Ricomincia"). */
.na-toast.has-action{display:flex;align-items:center;gap:14px;pointer-events:auto}
.na-toast-action{background:none;border:1px solid var(--na-accent2);color:var(--na-accent2);border-radius:6px;padding:5px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.na-toast-action:hover{background:var(--na-accent2);color:#fff}
/* D-30: conferma in pagina (NAUI.confirm) e rinomina inline del percorso. */
.na-modal{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(13,15,19,.72);opacity:0;transition:opacity .15s}
.na-modal.show{opacity:1}
.na-modal-box{width:min(440px,100%);background:var(--na-card2);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:22px 22px 18px;box-shadow:var(--na-shadow-pop)}
.na-modal-title{margin:0 0 8px;font-size:18px;color:var(--na-text)}
.na-modal-text{margin:0 0 16px;color:#c8d2dc;font-size:14.5px;line-height:1.5}
.na-modal-actions{display:flex;justify-content:flex-end;gap:8px}
.na-btn.na-btn-danger{background:#b3261e}
.na-btn.na-btn-danger:hover{background:#d33a30}
.na-pl-inline{padding:12px 14px 4px;display:flex;flex-direction:column;gap:8px}
.na-pl-inline input{width:100%;background:var(--na-card);border:1px solid var(--na-accent);color:var(--na-text);border-radius:8px;padding:9px 12px;font:inherit;font-size:15px}
.na-pl-inline-actions{display:flex;gap:8px}
.na-pl-inline-actions .na-btn{padding:7px 12px;font-size:13px}
/* D-33: chip oltre il limite (cliccabile, mostra il messaggio) invece di disabled. */
.na-wz-chip.is-off{opacity:.4;cursor:not-allowed}
.na-wz-chip.is-off:hover{border-color:var(--na-line)}
/* D-35: segnaposto video nei percorsi senza copertina; controlli più grandi con testo. */
.na-pl-noimg{color:var(--na-accent2)}
.na-pl-noimg svg{opacity:.85}
.na-pl-ctrl{gap:6px;flex-wrap:wrap}
.na-pl-ctrl button{width:auto;min-width:36px;height:36px;padding:0 10px;font-size:12.5px;gap:6px;white-space:nowrap}
.na-pl-ctrl .na-pl-rm{font-size:13px}
.na-pl-ctrl .na-pl-rm::first-letter{font-size:17px}
@media(max-width:480px){.na-pl-ctrl-txt{display:none}.na-pl-ctrl button{padding:0 10px;min-width:40px;height:40px;font-size:15px}}

/* ==========================================================================
   Ritocchi dal test UX mobile da Socio (2026-10-12, plugin 1.37.0).
   ========================================================================== */
/* M-33: i toast non si sovrappongono a bolla/FAB/barra percorso: su mobile in alto, con la barra percorso sopra la barra. */
body.na-has-seqbar .na-toasts{bottom:calc(var(--na-seqbar-h,76px) + 16px)}
@media(max-width:640px){
	.na-toasts{top:16px;bottom:auto !important;max-width:94vw}
	.na-toast{font-size:13.5px;padding:9px 14px}
	.na-toast.has-action{flex-wrap:wrap;justify-content:center}
}
/* M-29: cuore e "+" sulle card da touch: 40px, distanziati, mai sopra la durata. */
@media(max-width:640px){
	.na-fav,.na-plus{width:40px;height:40px;opacity:1;background:rgba(0,0,0,.62)}
	.na-fav{top:8px}
	.na-plus{top:54px;color:#fff;background:rgba(26,125,60,.85)}
	.na-card.is-viewed .na-fav{top:42px}
	.na-card.is-viewed .na-plus{top:88px}
	.na-thumb .na-dur{bottom:6px;right:6px}
	/* Altezze allineate nella stessa riga: tag su massimo due righe. */
	.na-cardbody .na-meta{max-height:52px;overflow:hidden}
}
/* M-38 (badge): nelle griglie a 2 colonne (481-640px) le card sono piccole: niente tag tematica/livello/anno sotto il titolo. */
@media(min-width:481px) and (max-width:640px){
	.na-grid .na-cardbody .na-meta{display:none}
	.na-grid .na-cardbody h3{min-height:0}
}
/* M-38 (badge): in Documenti su mobile la copertina è piccola: niente badge tipologia/durata sopra. */
@media(max-width:560px){
	.na-doc-thumb .na-tipo,.na-doc-thumb .na-dur{display:none}
}
/* M-38: aree di tocco dei link piccoli. */
@media(max-width:640px){
	.na-doc-videolink{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px}
	.na-att-all{display:inline-flex;align-items:center;min-height:44px}
	.na-perc-teaser a,.na-seqnote a{display:inline-block;padding:8px 0}
}
/* M-34: pannello "Aggiungi contenuti": intestazione con Chiudi, righe con titolo su 2 righe + tipologia · durata. */
.na-pl-phead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.na-pl-phead strong{font-family:var(--na-font-head);font-size:15px;color:var(--na-text)}
.na-pl-phead .na-btn{padding:7px 12px;font-size:13px}
.na-pl-rtitle{display:flex;flex-direction:column;gap:2px;white-space:normal}
.na-pl-rname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.na-pl-rsub{color:var(--na-muted);font-size:12.5px}
@media(max-width:640px){
	.na-pl-rrow{align-items:flex-start;padding:8px 10px}
	.na-pl-radd,.na-pl-radded{align-self:center}
}

/* ==========================================================================
   Il mio account — dashboard personale ([na_myaccount], v1.38.0).
   ========================================================================== */
.na-account{width:90%;max-width:1200px;margin:0 auto;padding:26px 0 8px;color:var(--na-text);font-family:var(--na-font)}
/* OceanWP sottolinea ogni link dentro .entry delle pagine: qui no (come .na-catalog). */
.na-account a,.na-acc-security a,.na-acc-back a{text-decoration:none !important}
.na-acc-seclinks a:hover,.na-acc-back a:hover{text-decoration:underline !important}
.na-account h1,.na-account h2,.na-account h3{font-family:var(--na-font-head)}
.na-acc-back{margin:0 0 10px}
.na-account-sub{padding-bottom:0}
.na-account-sub .na-acc-title{margin:0;font-size:26px}
.na-acc-back a{color:var(--na-accent2);text-decoration:none;font-weight:600}
/* Intestazione */
.na-acc-hero{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;padding:22px 26px;background:linear-gradient(135deg,var(--na-card2),var(--na-card));border:1px solid var(--na-line);border-radius:var(--na-radius)}
.na-acc-hero-main{flex:1;min-width:220px}
.na-acc-hero h1{margin:0 0 4px;font-size:26px;line-height:1.15;color:var(--na-text)}
.na-acc-sub{color:var(--na-muted);margin:0;font-size:14px}
.na-acc-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.na-acc-pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;letter-spacing:.02em;border:1px solid var(--na-line);color:var(--na-muted)}
.na-acc-pill.is-socio{background:var(--na-accent);border-color:var(--na-accent);color:#fff}
.na-acc-pill.is-sigillo{background:#2b3350;border-color:#2b3350;color:#fff}
.na-acc-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.na-account .na-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;font-family:var(--na-font-head);font-weight:600;font-size:14px;border-radius:var(--na-radius-sm)}
.na-account .na-btn-ghost{background:transparent;border:1px solid var(--na-line);color:var(--na-text)}
.na-account .na-btn-ghost:hover{border-color:var(--na-accent2);color:var(--na-accent2)}
/* Sezioni */
.na-acc-section{margin-top:34px}
.na-acc-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.na-acc-sechead h2,.na-acc-title{margin:0;font-size:20px;color:var(--na-text)}
.na-acc-title{margin-top:40px}
.na-acc-seclinks{display:flex;gap:18px;flex-wrap:wrap}
.na-acc-seclinks a{font-size:14px;color:var(--na-accent2);text-decoration:none;white-space:nowrap}
.na-acc-seclinks a:hover{text-decoration:underline}
.na-acc-empty{border:1px dashed var(--na-line);border-radius:var(--na-radius);padding:22px;color:var(--na-muted);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.na-acc-empty p{margin:0}
.na-account .na-grid.na-acc-grid{grid-template-columns:repeat(4,1fr);padding:0}
.na-acc-cardwrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.na-acc-cardwrap .na-card{flex:1} /* didascalia 'Riprendi da' allineata in basso */
.na-acc-resume{font-size:13px;font-weight:600;color:var(--na-accent2)}
/* Numeri */
.na-acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.na-acc-stat{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:18px 20px;min-width:0}
.na-acc-stat-n{font-family:var(--na-font-head);font-weight:700;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.na-acc-stat-l{color:var(--na-muted);font-size:13px;margin-top:6px}
.na-acc-stat-s{font-size:12px;color:var(--na-accent2);margin-top:8px}
/* Percorsi */
.na-acc-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.na-acc-path{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.na-acc-path-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--na-muted);font-weight:600}
.na-acc-path h3{margin:0;font-size:16px;line-height:1.3;color:var(--na-text)}
.na-acc-pbar{height:6px;border-radius:999px;background:var(--na-line);overflow:hidden}
.na-acc-pbar>span{display:block;height:100%;background:var(--na-accent2)}
.na-acc-path-meta{display:flex;justify-content:space-between;gap:8px;color:var(--na-muted);font-size:12px;font-variant-numeric:tabular-nums}
.na-acc-path-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.na-acc-path .na-btn{min-height:36px;padding:0 14px;font-size:13px}
/* Sicurezza e privacy (sotto il form UM) */
.na-acc-security{margin:18px 0 40px} /* dentro .um-form, già largo come la dashboard */
.na-acc-security h3{margin:0 0 12px;font-size:17px;font-family:var(--na-font-head);color:var(--na-text)}
.na-acc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.na-acc-links a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius-sm);text-decoration:none;color:var(--na-text);font-weight:600;min-width:0}
.na-acc-links a span{color:var(--na-muted);font-size:13px;font-weight:400}
.na-acc-links a:hover{border-color:var(--na-accent2)}
.na-acc-links a.is-danger{color:var(--na-danger)}
@media(max-width:1000px){.na-account .na-grid.na-acc-grid{grid-template-columns:repeat(3,1fr)}.na-acc-stats{grid-template-columns:repeat(2,1fr)}.na-acc-paths{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.na-account .na-grid.na-acc-grid{grid-template-columns:1fr 1fr;gap:12px}.na-acc-paths,.na-acc-links{grid-template-columns:1fr}.na-acc-hero{padding:18px}.na-acc-hero h1{font-size:22px}.na-account,.na-acc-back{width:auto;padding-left:16px;padding-right:16px}.na-acc-hero-actions{width:100%}.na-acc-hero-actions .na-btn{flex:1}}
@media(max-width:420px){.na-account .na-grid.na-acc-grid{grid-template-columns:1fr}}