/*
Theme Name: Accademia Tecnojus
Theme URI: https://accademia.tv
Description: Tema figlio di GeneratePress per Accademia Tecnojus
Author: AF&P srl
Author URI: https://accademia.tv
Template: generatepress
Version: 2.0
Text Domain: accademia-theme
*/

/* ============================================================
   DESIGN SYSTEM — Accademia Tecnojus
   Ricostruito da zero il 2026-07-17 sui mockup di riferimento
   in 01_MOCKUP_RIFERIMENTO. Un'unica fonte per tutti i template:
   nessuna regola qui sotto va duplicata nei singoli file PHP.
   ============================================================ */

:root {
  /* Palette aggiornata il 2026-07-26 sul mockup "24-25 luglio 2026"
     (accademia-mockup/style.css). Nomi delle variabili invariati di
     proposito, per non dover toccare centinaia di regole var(--x) nel
     resto del foglio: cambia solo il VALORE, così l'intero sito eredita
     la nuova identità visiva non appena questo file viene ricaricato. */
  --orange:      #B4501F;   /* rust — era #C15A2C (4,4:1), ora 5,1:1 sul bianco: REGIA accessibilità, 09/10/2026 */
  /* Colori dei sei tipi di contenuto (palette REGIA «accessibilita-colori-segni», 09/10/2026):
     unica fonte per pill, etichette, bordi, puntini e copertine. Orientamenti e Normative nel blu del sito. */
  --c-sentenza: #3E4C5E; --c-sentenza-lt: #E9ECF0;
  --c-commento: #3F51A3; --c-commento-lt: #E8EAF5;
  --c-quesito:  #8A2F47; --c-quesito-lt:  #F4E7EB;
  --c-dossier:  var(--orange); --c-dossier-lt: var(--orange-lt);
  --c-quaderno: var(--purple); --c-quaderno-lt: var(--purple-lt);
  --c-focus:    var(--teal);   --c-focus-lt:   var(--teal-lt);
  --orange-lt:   #FBE3D6;
  --orange-dark: #9C4620;   /* rust-dark */
  /* Secondo colore sistemico, riservato SOLO al tipo di contenuto nelle
     card-lista (REGIA UI-liste_secondo-colore-eyebrow_31-08-2026): stesso
     hex di --podcast-blue, promosso a variabile semantica propria.
     Contrasto 7.29:1 su bianco (soglia AA 4.5:1), saturazione 65% quasi
     identica al 63% dell'arancione, tonalità quasi opposta (206° vs 18°) —
     verificato distinguibile in protanopia/deuteranopia/tritanopia. */
  --text-category: #1d5a8a;
  --blue:        #1A3A5C;   /* invariato: già identico a --hero-blue del mockup */
  --blue-mid:    #3E5C76;   /* slate */
  --blue-lt:     #E4E9F0;
  --ink:         #16213E;
  --ink-mid:     #45507A;
  --ink-muted:   #5F6888;   /* era #6B7494 (4,3:1 sul grigio chiaro), ora ≥ 4,5:1 su bianco, --surface, barra menu e --blue-lt: piano home A4, 10/10/2026 */
  --rule:        #D8DAD3;
  --surface:     #F5F6F4;
  --border-strong: #9DA097;  /* Addendum_tipografico_scheda_sentenza 24-08-2026: bordo neutro forte dei riquadri Alert/Indicazione/Rischio, sempre grigio, mai colorato */
  --white:       #FFFFFF;
  --green:       #3F7D5C;
  --green-lt:    #E7F0EA;
  --green-mid:   #3F7D5C;
  --amber:       #B8862E;
  --amber-lt:    #F5EDDC;
  --amber-dark:  #8a5c1f;   /* testo su badge tag-sentenza, dal mockup */
  --podcast-blue: #1d5a8a;  /* dal .ctype-podcast del mockup, mai promosso a variabile lì */
  --purple:      #6C4079;
  --purple-lt:   #EFE6F3;
  --teal:        #1F6363;
  --teal-lt:     #E1EFEF;
  --red:         #B0432F;
  --red-lt:      #F5E4DF;
  --grey:        #5B6472;   /* codifica colore tipologia (Normativa/Articolo) — Addendum2 14/08/2026 */
  --grey-lt:     #E8E9EC;
  --pink:        #B5487A;   /* codifica colore tipologia (Quesito) — Addendum2 14/08/2026 */
  --pink-lt:     #F5E3EC;
  --serif:       'Source Serif 4', Georgia, serif;
  --sans:        'IBM Plex Sans', system-ui, sans-serif;
  --mono:        'IBM Plex Mono', 'Courier New', monospace;
  --radius:      4px;
  --radius-lg:   8px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  /* toni "on-dark" (hero/card scure): il mockup li usa come valori letterali
     anche nel proprio foglio, mai come variabili — li rendo qui tracciabili. */
  --rust-on-dark:   #E9A57C;
  --border-on-dark: #2a3760;
  --border-on-dark-2: #202c4d;
  --text-on-dark:   #C9D1E0;
  --text-on-dark-muted: #C4CCE0;

  /* SCALA TIPOGRAFICA — 14/08/2026, Specifica_grafica_organica_tipografia_
     spaziatura_layout. Sostituisce le dimensioni ad hoc accumulate
     template per template su Normativa/Sentenza/Commento/Quesito (26px
     vs 22px per lo stesso ruolo di titolo pagina, 16px vs 13.6px vs 18px
     per corpo testo, 10/10.3/10.5/11px per le etichette — nessuna di
     queste variazioni comunicava una gerarchia reale). Salto netto e
     percepibile tra livelli, non incrementale. */
  --fs-h1:          1.375rem;  /* 22px — titolo pagina (era 22px su Sentenza/Normativa, 26px su Commento/Quesito: ora unico) */
  --fs-h2:          1.125rem; /* 18px — intestazione di sezione dentro il corpo */
  --fs-h3:          1rem;      /* 16px — sotto-sezione */
  --fs-body:        1rem;      /* 16px — corpo testo (prose, analisi, lock-content) */
  --fs-body-lg:      1.0625rem; /* 17px — testo enfatizzato (domanda/massima/abstract/risposta sintetica) */
  --fs-caption:     0.8125rem; /* 13px — metadati (meta-value, byline) */
  --fs-label:       0.6875rem; /* 11px — etichette maiuscole (cs-label, meta-label, .k) */
  --lh-h1:          1.3;
  --lh-h2:          1.35;
  --lh-body:        1.7;
  --lh-caption:     1.4;

  /* SCALA DI SPAZIATURA — stessa specifica. Sostituisce i margin/padding
     ad hoc (8/20/28/48px senza progressione) su margini tra sezioni,
     padding dei box e gap dei layout a due colonne. */
  --sp-1: .25rem;  /* 4px */
  --sp-2: .5rem;   /* 8px */
  --sp-3: 1rem;    /* 16px */
  --sp-4: 1.5rem;  /* 24px */
  --sp-5: 2rem;    /* 32px */
  --sp-6: 3rem;    /* 48px */
  --sp-7: 4rem;    /* 64px */
}

/* ICONE SVG monocrome (accademia_icon(), paragrafo 5.1) — mai emoji */
.svgic { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
.svgic path, .svgic rect, .svgic circle { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── RESET ─────────────────────────────────────────────────── */
.at *, .at *::before, .at *::after { box-sizing: border-box; }
.at ul { list-style: none; margin: 0; padding: 0; }
/* Nota: regola base SENZA prefisso .at di proposito — deve avere
   specificità più bassa di ogni classe-componente (.btn-primary,
   .hero-cta-main, ecc.) così i pulsanti con colore testo esplicito
   vincono sempre sul colore link di default. Con ".at a" (più
   specifico di una singola classe) il testo bianco dei pulsanti
   arancioni spariva, sovrascritto dall'arancione del link — bug
   corretto il 2026-07-18. Vince comunque su quello di GeneratePress
   perché questo foglio si carica dopo, a parità di specificità. */
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }
.at h1, .at h2, .at h3, .at h4, .at p { margin: 0; }
.at h1, .at h2, .at h3, .at h4 { font-family: var(--serif); font-weight: 600; }
.at h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.at h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.at h3, .at h4 { font-size: var(--fs-h3); line-height: var(--lh-h2); }
body.at-body {
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased;
}
body.at-body.at-body--white { background: var(--white); }
.at-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── TOPBAR / NAVBAR: vedi blocco "HEADER CONDIVISO" in coda al file
   (riscritto il 2026-07-27, fedele a index.html/home-abbonato.html) ── */
.btn-outline { border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--ink-mid); background: transparent; cursor: pointer; transition: all .15s; display: inline-block; }
@media screen { .btn-outline { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-primary { background: var(--orange); color: #fff; border: none; border-radius: var(--radius); padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; display: inline-block; }
@media screen { .btn-primary { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.btn-primary:hover { background: var(--orange-dark); color: #fff; }

/* ── BREADCRUMB ────────────────────────────────────────────── */
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--rule); padding: 9px 0; font-size: 12px; color: var(--ink-muted); }
@media screen { .breadcrumb { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.breadcrumb-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Quando la breadcrumb è annidata dentro un altro .at-container (hero scure:
   .area-hero, .sen-head, .norm-head, .search-hero), il suo .at-container
   interno non deve sommare un secondo 24px di padding a quello già dato
   dal contenitore esterno — altrimenti la breadcrumb risulta più rientrata
   del titolo H1 sotto di lei e disallineata rispetto alle pagine dove la
   breadcrumb è invece un elemento a sé (Chi siamo, Assistenza, Contatti…).
   Bug trovato il 27/07 sera: le pagine aree tematiche/sentenza/normativa
   avevano 48px invece di 24px, la home-abbonato era già stata corretta
   in isolamento con una regola scoped equivalente (riga più sotto). */
.at-container .breadcrumb-inner { padding: 0; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--orange); }
.bc-home { display: inline-flex; align-items: center; gap: 4px; }
.bc-sep { color: var(--rule); font-size: 14px; }
.bc-current { color: var(--ink); font-weight: 500; }

/* ── STICKY BAR (full-width: home / chi siamo / hub area / hub attività) ── */
.sticky-bar { background: var(--white); border-bottom: 1px solid var(--rule); position: sticky; top: var(--navbar-h, 123px); z-index: 50; box-shadow: var(--shadow-sm); }
.sticky-bar-inner { display: flex; align-items: center; }
.sb-item { font-size: 13px; font-weight: 500; color: var(--ink-muted); padding: 13px 12px; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; text-decoration: none; }
@media screen { .sb-item { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sb-item:hover { color: var(--orange); }
.sb-item.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }
.sb-sep { color: var(--rule); padding: 0 4px; font-size: 16px; }
.sb-spacer { flex: 1; }
.sb-count { font-size: 12px; color: var(--ink-muted); padding: 0 16px; border-left: 1px solid var(--rule); white-space: nowrap; }
@media screen { .sb-count { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sb-count strong { color: var(--orange); }
.sb-login { font-size: 12px; font-weight: 500; color: var(--ink-muted); padding: 6px 12px; cursor: pointer; border: 1px solid var(--rule); border-radius: var(--radius); margin-right: 8px; transition: all .15s; text-decoration: none; }
@media screen { .sb-login { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sb-login:hover { border-color: var(--blue); color: var(--blue); }
.sb-cta { font-size: 12px; font-weight: 600; color: #fff; background: var(--orange); border: none; border-radius: var(--radius); padding: 6px 16px; cursor: pointer; transition: background .15s; white-space: nowrap; text-decoration: none; display: inline-block; }
@media screen { .sb-cta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sb-cta:hover { background: var(--orange-dark); color: #fff; }

/* ── STICKY NAV (framed, incorporata nella colonna principale delle schede) ── */
/* max-width:100% (correzioni F01 28/08/2026, punto sticky-nav): con
   position:sticky + overflow-x:auto su un flex-item di un flex-container
   in colonna (.main-col), la larghezza può risultare quella "desiderata"
   dal contenuto interno invece di restare vincolata al genitore — visto
   nello screenshot di Romolo: la barra sconfinava nella colonna della
   sidebar. max-width:100% è il vincolo esplicito, senza eccezioni. */
.sticky-nav { background: var(--white); border: 1px solid var(--rule); border-top: none; border-bottom: none; position: sticky; top: var(--navbar-h, 123px); z-index: 50; display: flex; align-items: center; overflow-x: auto; max-width: 100%; }
.sn-item { font-size: 13px; font-weight: 500; color: var(--ink-muted); padding: 12px 12px; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; text-decoration: none; }
@media screen { .sn-item { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sn-item:hover { color: var(--orange); }
.sn-item.active { color: var(--orange); border-bottom-color: var(--orange); }
.sn-sep { color: var(--rule); font-size: 18px; padding: 0 2px; }
.sn-end { margin-left: auto; padding: 0 16px; display: flex; gap: 8px; }
/* Addendum 17, punto 3 (22/09/2026): "Torna su" sempre visibile, fuori dalla parte che scorre, su
   scheda sentenza (.sticky-nav--split, single-sentenza.php). Scoped a questa sola classe modificatrice:
   .sticky-nav "semplice" (commento, quesito, senza .sn-end) resta invariata, stesso comportamento di
   overflow-x:auto sulla barra intera di sempre. */
.sticky-nav.sticky-nav--split { overflow-x: visible; }
.sticky-nav--split .sn-scroll { display: flex; align-items: center; overflow-x: auto; min-width: 0; }
.sticky-nav--split .sn-end { flex-shrink: 0; }

/* Addendum 16, punto 1 (22/09/2026): sticky menu di sezione dell'orientamento (nav.tem-stick-menu,
   single-tematismo.php).
   Addendum 17, punto 1 (22/09/2026): allineamento — Romolo ha segnalato che la barra andava a
   tutta larghezza mentre il resto della pagina resta nel contenitore centrale. Sfondo/bordo/sticky
   stanno sul <nav> (a tutta larghezza, come nav.stick-menu/.navbar — le altre barre "di primo
   livello" del sito, non quelle incorporate in una colonna come lo sticky-nav della scheda
   sentenza): il contenitore interno (.sticky-nav, riusato per lo stile e per scrollspy.js) è
   ricondotto alla stessa larghezza massima e allo stesso padding orizzontale di .at-container
   (1200px, 24px) con la regola subito sotto, che gli toglie sfondo/bordo/sticky propri (già sul
   <nav>) senza toccarne flex/overflow-x, invariati per non alterare lo scorrimento interno delle
   voci quando non ci stanno (stesso comportamento già in uso su scheda sentenza/commento/quesito).
   Addendum 18 (22/09/2026): la barra era nascosta finché l'intestazione non usciva dalla vista
   (classe is-visible, messa da un IntersectionObserver in tem-stick-menu.js); Romolo ha deciso che
   deve essere sempre visibile fin dal caricamento, come le altre barre sticky del sito — tolta la
   condizione (regola is-visible e max-height/opacity/pointer-events di partenza), l'Observer nel JS
   è stato rimosso insieme ad essa (non serviva ad altro nel file). */
.tem-stick-menu { background: var(--white); border-bottom: 1px solid var(--rule); position: sticky; top: var(--navbar-h, 123px); z-index: 50; }
.tem-stick-menu .sticky-nav { position: static; background: none; border: none; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
/* Il bordo destro di "Stampa" deve coincidere con quello del contenuto sottostante (Addendum 17, punto 1): .sn-end ha un padding-right proprio (16px, per lo spazio dagli altri usi di .sticky-nav) che qui lo sfaserebbe. */
.tem-stick-menu .sn-end { padding-right: 0; }
/* "Torna su" e "Stampa" sono <button>, non <a>: stessa resa di .sn-item, azzerato lo stile nativo del browser. */
.sn-end button.sn-item { background: none; border: none; border-bottom: 2px solid transparent; font: inherit; }


/* ── MENU CONTESTUALE DI PAGINA (.ctx-menu) — correzioni F01 28/08/2026 ──
   Sostituisce lo sticky-nav a scorrimento orizzontale per i contenuti a
   nodi (Focus, e in futuro Quaderno/Dossier): decisione di Romolo, "nessuno
   sticky-nav può essere a scorrimento orizzontale" — con un indice che può
   avere molte voci (7 per un Focus, potenzialmente 20-30 per Quaderno/
   Dossier) né lo scorrimento orizzontale né l'andare a capo su più righe
   comunicano "menu di navigazione della pagina" in modo chiaro. Pattern
   scelto: barra a una riga sola con la sezione corrente, tasto che apre un
   pannello a comparsa con l'elenco completo in verticale (scroll interno
   proprio se molto lungo — normale per un menu a tendina). Componente
   generico, non specifico di Focus: nome classi neutro apposta per essere
   riusato senza modifiche quando Quaderno/Dossier avranno la stessa
   esigenza. Comportamento apri/chiudi in assets/js/scrollspy.js. */
.ctx-menu { --ctx-accent: var(--ink-muted); position: sticky; top: var(--navbar-h, 123px); z-index: 50; background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--ctx-accent); border-top: none; }
/* Riga "‹ Torna ai contenuti" (aggiunta 08/09/2026): fuori dal <button>
   .ctx-menu-toggle apposta — un <a> non può essere annidato dentro un
   <button> (contenuto interattivo in contenuto interattivo, non valido in
   HTML e comunque in conflitto con il listener di apri/chiudi pannello in
   scrollspy.js), quindi eyebrow e link di rientro condividono una riga
   propria sopra al toggle invece che dentro. Il JS non referenzia
   .ctx-menu-eyebrow, quindi lo spostamento è innocuo. */
.ctx-menu-head { display: flex; align-items: baseline; gap: 7px; padding: 9px 18px 0; }
.ctx-menu-back { font-size: 11px; font-weight: 600; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
@media screen { .ctx-menu-back { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-back:hover { color: var(--ctx-accent); text-decoration: underline; }
.ctx-menu-sep { font-size: 10px; color: var(--rule); }
@media screen { .ctx-menu-sep { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-toggle { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 4px 18px 11px; background: none; border: none; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.ctx-menu-toggle:hover { background: var(--surface); }
.ctx-menu-eyebrow { font-size: 10px; font-weight: 700; color: var(--ctx-accent); }
@media screen { .ctx-menu-eyebrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-main-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ctx-menu-current { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.ctx-menu-current::before { content: "§"; opacity: .5; font-size: 11px; flex-shrink: 0; color: var(--ctx-accent); }
@media screen { .ctx-menu-current::before { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-pos { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); flex-shrink: 0; }
@media screen { .ctx-menu-pos { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media screen { .ctx-menu-label { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-chevron { flex-shrink: 0; font-size: 17px; font-weight: 700; color: var(--ctx-accent); line-height: 1; transition: transform .15s; }
.ctx-menu-toggle[aria-expanded="true"] .ctx-menu-chevron { transform: rotate(180deg); }
.ctx-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--ctx-accent); border-top: none; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 60vh; overflow-y: auto; z-index: 51; }
.ctx-menu-panel[hidden] { display: none; }
.ctx-menu-item { display: block; padding: 10px 18px; font-size: 13px; color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--rule); }
@media screen { .ctx-menu-item { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctx-menu-item:last-child { border-bottom: none; }
.ctx-menu-item:hover { background: var(--surface); color: var(--ctx-accent); }
.ctx-menu-item.active { color: var(--ctx-accent); font-weight: 600; background: var(--surface); }
/* Voci a due livelli nel pannello (Quaderno, pilota Q01 28/08/2026) —
   stesso principio dell'indice a due livelli in pagina: il capitolo fa da
   intestazione, il paragrafo è indentato e con peso ridotto. */
.ctx-menu-item-capitolo { font-weight: 700; background: var(--surface); }
.ctx-menu-item-paragrafo { padding-left: 32px; font-weight: 400; color: var(--ink-muted); }
.ctx-menu-item-paragrafo.active { color: var(--ctx-accent); font-weight: 600; }
/* Viewport stretti: la riga .ctx-menu-head (link di rientro + eyebrow) è la
   prima a rischiare di non stare su una riga sola. Si comprime prima
   l'eyebrow locale ("Dossier/Quaderno/Focus · Menu" → solo "§"), mai il
   link "‹ Torna ai contenuti" che resta sempre per intero fino a 400px;
   sotto quella soglia si abbrevia in "‹ Contenuti". Il testo reale resta
   sempre nel DOM (font-size:0, non display:none) per non penalizzare gli
   screen reader, solo la resa visiva cambia. */
@media (max-width: 520px) {
  .ctx-menu-eyebrow { font-size: 0; }
  .ctx-menu-eyebrow::before { content: "§"; font-size: 13px; font-weight: 700; color: var(--ctx-accent); }
@media screen { .ctx-menu-eyebrow::before { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
}
@media (max-width: 400px) {
  .ctx-menu-back { font-size: 0; }
  .ctx-menu-back::before { content: "‹ Contenuti"; font-size: 11px; font-weight: 600; }
@media screen { .ctx-menu-back::before { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
}
.sn-btn { font-size: 12px; padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white); color: var(--ink-muted); cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; }
@media screen { .sn-btn { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sn-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── LAYOUT A 2 COLONNE (schede + hub) ────────────────────────── */
.page-inner-grid { padding: 32px 24px 64px; display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.page-body { padding: 28px 24px 48px; }
.page-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }
/* min-width:0 (correzioni F01 28/08/2026, punto larghezza pagina): .main-col
   è sia flex-container (colonna) sia elemento di una grid (.page-grid-cd,
   1fr + 210px). Senza questo, il suo min-width implicito è "auto" (= il
   max-content del contenuto), quindi un discendente con contenuto largo
   che non si restringe può forzare l'intera colonna — e quindi l'intera
   pagina — oltre il container da 1200px, anche se quel discendente ha
   ufficialmente overflow-x:auto/hidden proprio (che protegge sé stesso ma
   non basta a impedire che il min-width "auto" di .main-col ne erediti la
   larghezza intrinseca). Fix generico e sicuro: non cambia nulla quando il
   contenuto già ci sta, serve solo quando qualcosa vorrebbe allargare. */
.main-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* ── SIDEBAR (condivisa da tutte le schede + hub) ─────────────── */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.side-block { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.side-head { padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 8px; }
@media screen { .side-head { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.side-body { padding: 14px 16px; }
.side-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12px; gap: 8px; }
@media screen { .side-row { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-row:last-child { border-bottom: none; }
.sr-label { color: var(--ink-muted); flex-shrink: 0; }
.sr-value { font-weight: 500; color: var(--ink); text-align: right; }
.sr-value a { color: var(--orange); }
.sr-value.green { color: var(--green); }

.autore-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.autore-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px; font-weight: 600; flex-shrink: 0; }
@media screen { .autore-avatar { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Addendum3_correzioni_round2 24-08-2026, punto 4: niente avatar (rimosso dal
   markup), nome/ruolo peso normale invece di 600. */
.autore-name { font-size: 13px; font-weight: 400; color: var(--blue); }
@media screen { .autore-name { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.autore-ruolo { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }
@media screen { .autore-ruolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.corr-item { padding: 12px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.corr-item:last-child { border-bottom: none; }
.corr-item:hover { background: var(--surface); }
.ci-tipo { font-size: 10px; font-weight: 700; margin-bottom: 4px; }
@media screen { .ci-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ci-tipo.ci-sentenza { color: var(--c-sentenza); }
.ci-tipo.ci-quesito  { color: var(--c-quesito); }
.ci-tipo.ci-commento { color: var(--c-commento); }
.ci-tipo.ci-focus    { color: var(--c-focus); }
.ci-tipo.ci-dossier  { color: var(--c-dossier); }
.ci-tipo.ci-quaderno { color: var(--c-quaderno); }
.ci-tipo.ci-norma    { color: var(--blue-mid); }
.ci-titolo { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 2px; }
@media screen { .ci-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ci-meta { font-size: 11px; color: var(--ink-muted); }
@media screen { .ci-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.corr-locked { padding: 16px; text-align: center; background: var(--surface); }
.lock-icon { font-size: 20px; color: var(--ink-muted); margin-bottom: 8px; }
.lock-text { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .lock-text { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.lock-cta { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--orange); }
@media screen { .lock-cta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── COLONNA DESTRA CORRELAZIONI (Addendum 13/08 + Addendum2 14/08/2026) ──
   Componente nuovo e indipendente da .sidebar/.corr-item/.ci-tipo (quelli
   restano invariati dove già in uso fuori dal perimetro di questo lavoro
   — front-page, single-articolo_normativo — per non alterarne l'aspetto
   senza necessità). Usato solo nei template toccati da questo intervento:
   Dossier/Quaderno/Focus (due livelli) e Normativa/Sentenza/Commento/
   Quesito (un livello). Larghezza fissa 210px, sticky sotto la barra di
   navigazione (123px navbar a due righe + ~48px sticky-nav/stick-menu
   della pagina — 123px misurato dal vivo dopo la riga "Aree tematiche"
   separata il 2026-08-28, Brief_ClaudeCode_Fix_Home_postlogin punto 1;
   prima era 64px a una riga sola). */
.page-grid-cd { padding: 32px 24px 64px; display: grid; grid-template-columns: 1fr 210px; gap: 32px; align-items: start; }
.col-destra { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.colonna-destra { position: sticky; top: calc(var(--navbar-h, 123px) + var(--stickbar-h, 32px) + 16px); display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--rule); padding-left: 18px; }
/* Trattamento signature (Progetto_design_coordinato_completo 14/08/2026,
   §2) — unico accento del design: bordo colorato invece del grigio neutro
   e un'intestazione dedicata. Non decorativo, non pesante: stesso box,
   stessi cd-blocco/cd-item di sempre, solo riconoscibile a colpo d'occhio. */
.colonna-destra--signature { border-left: 2px solid var(--orange); }
/* Addendum 14, punto 4: colonna sticky più alta dello spazio disponibile (classe messa da sticky-layout.js) → scorre con la pagina. */
aside.is-tall { position: static; }
/* Stesso stile delle altre etichette di blocco sidebar (.cd-label —
   REDAZIONE/SCHEDA SENTENZA/NORMATIVA DI RIFERIMENTO), Correzione2_addendum5
   punto 2, 25-08-2026: prima ereditava lo stile serif/blu della vecchia
   intestazione "Da questo articolo si irradiano", stonato col resto. */
.cd-signature-titolo { font-size: 10.5px; font-weight: 700; color: var(--ink-muted); margin-bottom: 6px; }
@media screen { .cd-signature-titolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.bh-byline { font-size: 12.5px; color: var(--ink-muted); margin-top: 10px; }
.bh-byline strong { color: var(--ink); font-weight: 600; }
/* Ereditarietà Commento/Quesito <- Sentenza di origine (Addendum2/3
   24-08-2026, punto 4/6) — riusa .fc-badge già definita per la scheda
   Sentenza, così l'icona/etichetta articolo è visivamente identica. */
.bh-derivazione { font-size: 12.5px; color: var(--ink-muted); margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.bh-derivazione a { color: var(--blue); font-weight: 600; text-decoration: none; }
.bh-derivazione a:hover { text-decoration: underline; }
.cd-blocco { display: flex; flex-direction: column; gap: 2px; }
.cd-label { font-size: 10.5px; font-weight: 700; color: var(--ink-muted); margin-bottom: 6px; }
@media screen { .cd-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-item { display: flex; align-items: center; gap: 9px; padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.cd-item:last-child { border-bottom: none; }
.cd-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tc-lt, var(--surface)); color: var(--tc, var(--ink-muted)); }
.cd-ic .svgic { width: 12px; height: 12px; }
.cd-body { min-width: 0; flex: 1; }
.cd-tipo { font-size: 11px; /* Addendum 14, punto 6: 11px (era 10) */ font-weight: 700; color: var(--tc, var(--ink-muted)); }
@media screen { .cd-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-titolo { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.35; margin-top: 1px; }
@media screen { .cd-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Addendum 13, punto 5 (21/09/2026): in accademia_cd_card() etichetta (.cd-tipo) e titolo (.cd-titolo) sono due <span>
   dentro .cd-body: senza display:block finivano sulla stessa riga, incollati ("NormativaArt. 3 …"). Una sola regola per
   tutti i template, su righe distinte con 3px di spazio. Scoped a .cd-body: ESCLUDE l'elenco misto (.lm-item), dove
   .cd-tipo sta dentro .lm-top accanto alla data e resta com'è. */
.cd-body .cd-tipo, .cd-body .cd-titolo { display: block; }
.cd-body .cd-titolo { margin-top: 3px; }
.cd-arrow { flex-shrink: 0; color: var(--rule); font-size: 13px; }
@media screen { .cd-arrow { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-riga { display: flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: none; }
.cd-riga .cd-ic { width: 18px; height: 18px; }
.cd-riga .cd-ic .svgic { width: 10px; height: 10px; }
.cd-riga-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--tc, var(--ink)); }
@media screen { .cd-riga-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-riga-label { font-size: 12px; color: var(--ink-muted); }
@media screen { .cd-riga-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-azioni { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.cd-azioni a, .cd-azioni button { font-size: 12px; font-weight: 500; color: var(--ink-muted); background: none; border: none; padding: 0; text-align: left; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 6px; }
@media screen { .cd-azioni a, .cd-azioni button { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-azioni a:hover, .cd-azioni button:hover { color: var(--orange); }
.cd-azioni .svgic { width: 13px; height: 13px; }

/* Riquadro "Tematismi giurisprudenziali" (BRIEF Tematismi 19/09/2026,
   Fase C3) — stessa struttura di .cd-item, badge di stato con colore E
   icona insieme (mai il solo colore). */
.tem-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.tem-item:last-child { border-bottom: none; }
/* Addendum 14, punto 2 (21/09/2026): l'etichetta di stato può andare a capo e non sfora mai la card (prima: flex-shrink:0 +
   nowrap → «Orientamento consolidato in sede amministrativa» usciva fino a 51 px dalla card tra 901 e 1050 px).
   flex-shrink:1 / min-width:0 / max-width:100% sul badge, white-space:normal sull'etichetta; l'icona resta a sinistra. */
.tem-badge { flex-shrink: 1; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
@media screen { .tem-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-badge .svgic { width: 14px; height: 14px; flex-shrink: 0; }
.tem-badge-label { white-space: normal; min-width: 0; font-size: 11px; }
@media screen { .tem-badge-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */ /* Addendum 14, punto 6: 11px (era 10, ereditato dal badge) */
.tem-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.tem-codice { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-muted); }
@media screen { .tem-codice { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-titolo { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.35; margin-top: 1px; }
@media screen { .tem-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-linea { font-size: 10.5px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .tem-linea { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* single-tematismo.php (Fase C4) — elenco sentenze per linea/orientamento. */
.tem-linea-gruppo { margin-bottom: 16px; }
.tem-sent-riga { display: flex; flex-direction: column; padding: 7px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.tem-sent-riga:last-child { border-bottom: none; }
.tem-sent-titolo { font-size: 13.5px; font-weight: 500; color: var(--ink); }
@media screen { .tem-sent-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-sent-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .tem-sent-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-cesura { font-size: 12.5px; color: var(--ink-muted); font-style: italic; margin: 4px 0 14px; }
.tem-verifica-riga { font-size: 11.5px; color: var(--ink-muted); margin-top: 10px; }
@media screen { .tem-verifica-riga { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Titolo del riquadro "Tematismi" in colonna destra (Addendum 4 punto 3). */
.tem-box-titolo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tem-box-ic { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.tem-box-ic .svgic { width: 16px; height: 16px; }
.tem-box-nome { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
@media screen { .tem-box-nome { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-box-sottotitolo { display: block; font-size: 10.5px; color: var(--ink-muted); }
@media screen { .tem-box-sottotitolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-bozza-tag { flex-shrink: 0; font-size: 9px; font-weight: 700; color: var(--orange); border: 1px solid var(--orange); border-radius: 3px; padding: 1px 4px; align-self: flex-start; }
@media screen { .tem-bozza-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-attivita-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tem-attivita-list li { font-size: 12.5px; color: var(--ink); padding: 3px 0; border-bottom: 1px solid var(--rule); }
@media screen { .tem-attivita-list li { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-attivita-list li:last-child { border-bottom: none; }

/* Codifica colore + icona per tipologia — vincolante solo dentro .colonna-destra
   e i suoi componenti (.cd-item/.cd-riga/.celle-collegate): mai un colore senza
   la sua icona abbinata, mai la stessa coppia per due tipologie (Addendum2). */
.ct-normativa, .ct-articolo_normativo { --tc: var(--grey); --tc-lt: var(--grey-lt); }
.ct-sentenza                          { --tc: var(--c-sentenza); --tc-lt: var(--c-sentenza-lt); }
.ct-commento                          { --tc: var(--c-commento); --tc-lt: var(--c-commento-lt); }
.ct-quesito                           { --tc: var(--c-quesito); --tc-lt: var(--c-quesito-lt); }
.ct-dossier                           { --tc: var(--c-dossier); --tc-lt: var(--c-dossier-lt); }
.ct-quaderno                          { --tc: var(--c-quaderno); --tc-lt: var(--c-quaderno-lt); } /* colori unici per tipo, 09/10/2026 */
.ct-focus                             { --tc: var(--c-focus); --tc-lt: var(--c-focus-lt); }
.ct-podcast, .ct-corso_formazione     { --tc: var(--green); --tc-lt: var(--green-lt); }

/* Riquadro a celle "Questo Dossier è collegato a" — apertura contenitore
   (Addendum 13/08): celle distinte cliccabili, non una riga di testo. */
.riepilogo-container-label { font-size: 12.5px; font-weight: 600; color: var(--ink-mid); margin: 20px 0 8px; }
.celle-collegate { display: flex; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 18px; flex-wrap: wrap; }
.cella-collegata { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-decoration: none; border-right: 1px solid var(--rule); }
.cella-collegata:last-child { border-right: none; }
.cella-collegata .cd-ic { width: 26px; height: 26px; }
.cella-collegata .cd-ic .svgic { width: 14px; height: 14px; }
.cc-num { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--tc, var(--ink)); line-height: 1; }
.cc-label { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .cc-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.norm-ref { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.norm-ref:last-child { border-bottom: none; }
.norm-ref-sigla { font-size: 10px; font-weight: 700; background: var(--blue-lt); color: var(--blue); padding: 3px 7px; border-radius: 4px; flex-shrink: 0; letter-spacing: .04em; white-space: nowrap; }
@media screen { .norm-ref-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-ref-info { flex: 1; }
.norm-ref-titolo { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
@media screen { .norm-ref-titolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-ref-art { font-size: 11px; color: var(--orange); }
@media screen { .norm-ref-art { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-ref-counts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.nc { font-size: 10px; color: var(--ink-muted); background: var(--surface); padding: 1px 7px; border-radius: 10px; }
@media screen { .nc { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nc strong { color: var(--orange); font-weight: 700; }

.dossier-promo { padding: 14px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.dossier-promo:last-child { border-bottom: none; }
.dossier-promo:hover { background: var(--surface); }
.dp-tipo { font-size: 10px; font-weight: 700; color: var(--amber); margin-bottom: 4px; }
@media screen { .dp-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dp-titolo { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 3px; }
@media screen { .dp-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dp-meta { font-size: 11px; color: var(--ink-muted); }
@media screen { .dp-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.abb-box { padding: 16px; }
.abb-label { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 6px; }
@media screen { .abb-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.abb-text { font-size: 12px; color: var(--ink-mid); line-height: 1.5; margin-bottom: 12px; }
@media screen { .abb-text { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.abb-btn { background: var(--orange); color: #fff; border: none; border-radius: var(--radius); padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; transition: background .15s; text-align: center; display: block; }
@media screen { .abb-btn { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.abb-btn:hover { background: var(--orange-dark); color: #fff; }


.serie-item { padding: 12px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.serie-item:last-child { border-bottom: none; }
.serie-item:hover { background: var(--surface); }
.serie-item.current { background: var(--orange-lt); }
.si-num { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--orange); margin-bottom: 3px; }
@media screen { .si-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.si-tit { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
@media screen { .si-tit { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.si-meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .si-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── SCHEDA HEADER (sentenza / quesito / commento) ────────────── */
.scheda-header { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 28px 32px 24px; border-bottom: none; }
.tipo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tipo-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
@media screen { .tipo-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tipo-pill.tp-sentenza { background: var(--c-sentenza-lt); color: var(--c-sentenza); }
.tipo-pill.tp-quesito  { background: var(--c-quesito-lt); color: var(--c-quesito); }
.tipo-pill.tp-commento { background: var(--c-commento-lt); color: var(--c-commento); }
.tipo-pill.tp-atto-autorita { background: var(--teal-lt); color: var(--teal); }
.area-pill { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--rule); padding: 3px 10px; border-radius: 4px; }
@media screen { .area-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.codice-pill { font-size: 11px; font-family: var(--mono); color: var(--ink-muted); background: var(--surface); padding: 3px 8px; border-radius: 4px; margin-left: auto; }
@media screen { .codice-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-titolo { font-family: var(--serif); font-size: var(--fs-h1); font-weight: 600; color: var(--blue); line-height: var(--lh-h1); margin-bottom: var(--sp-2); }
.scheda-sottotitolo { font-size: 15px; color: var(--ink-muted); font-style: italic; margin-bottom: 20px; line-height: 1.5; }
.meta-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.meta-cell { padding: 10px 14px; border-right: 1px solid var(--rule); background: var(--surface); }
.meta-cell:last-child { border-right: none; }
.meta-label { font-size: var(--fs-label); font-weight: 700; color: var(--ink-muted); margin-bottom: 3px; }
.meta-value { font-size: var(--fs-caption); font-weight: 500; color: var(--ink); }

/* ── HEADER A BANDA (dossier / quaderno / focus) ──────────────── */
.banded-header { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; overflow: hidden; }
.bh-banda { padding: 6px 32px; display: flex; align-items: center; gap: 10px; }
.bh-banda.banda-orange { background: var(--orange); }
.bh-banda.banda-teal { background: var(--teal); }
.bh-banda.banda-purple { background: var(--purple); }
.bh-tipo { font-size: 11px; font-weight: 700; color: #fff; }
@media screen { .bh-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.bh-codice { font-size: 11px; font-family: var(--mono); color: rgba(255,255,255,.7); margin-left: auto; }
@media screen { .bh-codice { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.bh-body { padding: 28px 32px 24px; }
.attivita-pill { font-size: 12px; color: var(--blue); background: var(--blue-lt); padding: 3px 10px; border-radius: 4px; }
@media screen { .attivita-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.bh-titolo { font-family: var(--serif); font-size: 27px; font-weight: 600; color: var(--blue); line-height: 1.25; margin-bottom: 8px; }
.bh-sottotitolo { font-size: 15px; color: var(--ink-muted); font-style: italic; margin-bottom: 20px; line-height: 1.5; }
.meta-strip { display: flex; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ms-cell { padding: 9px 16px; border-right: 1px solid var(--rule); background: var(--surface); flex: 1; }
.ms-cell:last-child { border-right: none; }
.ms-label { font-size: 10px; font-weight: 700; color: var(--ink-muted); margin-bottom: 2px; }
@media screen { .ms-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ms-value { font-size: 13px; font-weight: 500; color: var(--ink); }
@media screen { .ms-value { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ms-value.green { color: var(--green); }

/* ── HEADER NORMA (blu, normativa) ────────────────────────────── */
.norma-header { background: var(--blue); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 32px 36px 28px; color: #fff; }
.nh-kicker { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media screen { .nh-kicker { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nh-badge { background: rgba(255,255,255,.12); font-size: 10px; padding: 2px 8px; border-radius: 10px; letter-spacing: .04em; }
@media screen { .nh-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nh-tipo-pill { background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
@media screen { .nh-tipo-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nh-sigla { font-family: var(--serif); font-size: 42px; font-weight: 600; color: var(--orange); line-height: 1; margin-bottom: 8px; letter-spacing: -.5px; }
.nh-titolo { font-family: var(--serif); font-size: 20px; font-weight: 500; color: rgba(255,255,255,.9); line-height: 1.35; margin-bottom: 18px; }
.nh-meta-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.nh-meta { font-size: 13px; color: rgba(255,255,255,.6); }
@media screen { .nh-meta { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nh-meta strong { color: rgba(255,255,255,.9); font-weight: 600; }
.nh-stato { display: inline-flex; align-items: center; gap: 5px; background: rgba(42,107,58,.8); color: #A8F0B8; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; }
@media screen { .nh-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nh-stato-dot { width: 6px; height: 6px; border-radius: 50%; background: #A8F0B8; }
.nh-stato.stato-abrogato { background: rgba(176,67,47,.8); color: #F5C9BE; }
.nh-stato.stato-abrogato .nh-stato-dot { background: #F5C9BE; }
.nh-stato.stato-modificato { background: rgba(184,134,46,.8); color: #F0DBA8; }
.nh-stato.stato-modificato .nh-stato-dot { background: #F0DBA8; }

.contatori-bar { background: var(--white); border: 1px solid var(--rule); border-top: none; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); }
.conto { padding: 16px 20px; border-right: 1px solid var(--rule); cursor: pointer; transition: background .15s; text-align: center; text-decoration: none; display: block; }
.conto:last-child { border-right: none; }
.conto:hover, .conto.active { background: var(--orange-lt); }
.conto.active { border-bottom: 2px solid var(--orange); }
.conto-n { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--orange); line-height: 1; }
.conto-label { font-size: 11px; color: var(--ink-muted); margin-top: 4px; font-weight: 500; }
@media screen { .conto-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── SEZIONI CONTENUTO (schede con paywall) ───────────────────── */
.content-section { background: var(--white); border: 1px solid var(--rule); border-top: none; padding: var(--sp-5) var(--sp-5); }
.content-section.last, .content-section:last-of-type { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.cs-label { font-size: var(--fs-label); font-weight: 700; color: var(--orange); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--orange-lt); display: flex; align-items: center; gap: 8px; }
.cs-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
@media screen { .cs-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cs-tag-pub  { background: var(--green-lt); color: var(--green); }
.cs-tag-priv { background: var(--amber-lt); color: var(--amber); }

/* Restyling box "Zona pubblica" (round 1, punto 6+9) — sostituisce la
   sottile riga con sottolineatura arancione. Colori rivisti nel round 2
   (punto C, 25-08-2026, accessibilità): il verde pieno del round 1
   falliva il contrasto WCAG AA (4.20:1 su soglia 4.5) — verificato con
   calcolo reale, non "a occhio". Ora sfondo quasi bianco + verde più
   scuro riservato a questa etichetta (7.38:1, non riusato altrove per non
   alterare --green in punti dove il vecchio valore andava bene). */
.cs-label-zona-pubblica { background: #F8FBF9; color: #2E5C44; border: none; border-radius: var(--radius); padding: 10px 14px; }
.cs-zp-ic { display: inline-flex; flex-shrink: 0; }
.cs-zp-ic .svgic { width: 14px; height: 14px; }

.domanda-box { background: #EEF1F6; border-left: 3px solid var(--blue-mid); border-radius: 0 5px 5px 0; padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.domanda-box .k { font-family: var(--mono); font-size: var(--fs-label); color: var(--blue-mid); }
.domanda-box p { font-size: var(--fs-body-lg); font-style: italic; margin-top: var(--sp-2); color: #1e2c47; line-height: var(--lh-body); }
.domanda-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.5); margin-bottom: 8px; }
@media screen { .domanda-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.domanda-testo { font-family: var(--serif); font-size: 18px; font-weight: 500; color: #fff; line-height: 1.4; font-style: italic; }

.domanda-quesito { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.dq-intestazione { background: var(--surface); padding: 10px 18px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dq-chi { font-size: 11px; font-weight: 600; color: var(--ink-muted); }
@media screen { .dq-chi { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dq-profilo { font-size: 11px; background: var(--blue-lt); color: var(--blue); padding: 2px 8px; border-radius: 10px; }
@media screen { .dq-profilo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dq-testo { padding: var(--sp-4) var(--sp-3); font-family: var(--serif); font-size: var(--fs-body-lg); font-weight: 500; color: var(--ink); line-height: var(--lh-body); }

.massima-box { background: #FDF6EF; border-left: 3px solid var(--orange); border-radius: 0 5px 5px 0; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.massima-box .k { font-family: var(--mono); font-size: var(--fs-label); color: var(--orange-dark); }
.massima-box p { font-size: var(--fs-body-lg); margin-top: var(--sp-2); line-height: var(--lh-body); }
.massima-label { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 8px; }
@media screen { .massima-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.massima-testo { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink); font-weight: 500; }

/* Sfondo pieno tolto (fix visivo 26-08-2026, scheda Quesito): restava
   l'unico box a colore pieno sulla pagina, cornice sinistra invariata,
   sfondo ora grigio chiaro neutro (stesso var(--surface) già usato per
   .dq-intestazione/.sintesi-box), mai un colore — stesso principio già
   applicato a .abstract-box/.alert-box con .box-tenue. */
.risposta-sintetica { border-left: 3px solid var(--green-mid); padding: 16px 20px; background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 20px; }
.rs-label { font-size: 10px; font-weight: 700; color: var(--green); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
@media screen { .rs-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rs-verdict { display: inline-block; font-size: 11px; font-weight: 700; background: var(--green); color: #fff; padding: 2px 10px; border-radius: 10px; letter-spacing: .04em; }
@media screen { .rs-verdict { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rs-testo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.rs-testo strong { font-weight: 600; color: var(--green); }

.abstract-box { border-left: 3px solid var(--purple); padding: 18px 22px; background: var(--purple-lt); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 20px; }
.abstract-box.abstract-teal { border-left-color: var(--teal); background: var(--teal-lt); }
.abstract-box.abstract-orange { border-left-color: var(--orange); background: var(--orange-lt); }
.abstract-label { font-size: 10px; font-weight: 700; color: var(--purple); margin-bottom: 8px; }
@media screen { .abstract-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.abstract-teal .abstract-label { color: var(--teal); }
.abstract-orange .abstract-label { color: var(--orange); }
.abstract-testo { font-family: var(--serif); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink); }

/* .box-tenue: sfondo quasi bianco per box con testo lungo (round 2, punto
   C, 25-08-2026 — accessibilità, principio valido per tutta la
   piattaforma). Applicata SOLO dove il markup la aggiunge esplicitamente
   (oggi: scheda commento) — non tocca .abstract-box/.alert-box di base,
   condivise anche con Focus/Quaderno/Dossier/Quesito/home. Bordo laterale
   colorato invariato: resta l'accento, ammesso a colore pieno. */
.abstract-box.box-tenue { background: #FAF8FB; }

.sintesi-box { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; background: var(--surface); margin-bottom: 20px; }
.sintesi-label { font-size: 10px; font-weight: 700; color: var(--ink-muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
@media screen { .sintesi-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sintesi-char { font-size: 11px; color: var(--ink-muted); font-weight: 400; }
@media screen { .sintesi-char { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sintesi-testo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-mid); }

/* Sfondo quasi bianco (round 2, punto C, 25-08-2026 — accessibilità:
   niente colore pieno dietro testo). La pillola .no-sigla dentro resta
   blu piena: è un badge corto, esplicitamente ammesso dal principio. Blu
   titolo su questo sfondo: 11.03:1, verificato. */
.norma-oggetto { display: flex; gap: 12px; align-items: flex-start; background: #F7F9FB; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.no-sigla { font-size: 11px; font-weight: 700; background: var(--blue); color: #fff; padding: 4px 10px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
@media screen { .no-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.no-titolo { font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 2px; }
@media screen { .no-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.no-art { font-size: 12px; color: var(--blue-mid); margin-bottom: 6px; }
@media screen { .no-art { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.no-link { font-size: 12px; color: var(--orange); font-weight: 500; }
@media screen { .no-link { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tag { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--rule); color: var(--ink-mid); background: var(--surface); }
@media screen { .tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tag-blue   { background: var(--blue-lt);   border-color: var(--blue-lt);   color: var(--blue); }
.tag-green  { background: var(--green-lt);  border-color: var(--green-lt);  color: var(--green); }
.tag-purple { background: var(--purple-lt); border-color: var(--purple-lt); color: var(--purple); }
.tag-teal   { background: var(--teal-lt);   border-color: var(--teal-lt);   color: var(--teal); }
.tag-orange { background: var(--orange-lt); border-color: var(--orange-lt); color: var(--orange-dark); }

/* ── PAYWALL ───────────────────────────────────────────────────
   Componente condiviso da tutte le schede: la parte visibile
   sfuma via mask-image, il "gate" sotto propone l'abbonamento. */
.paywall-section { background: var(--white); border: 1px solid var(--rule); border-top: none; position: relative; overflow: hidden; }
.anteprima-due-righe p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.paywall-preview { padding: 28px 32px 0; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%); mask-image: linear-gradient(to bottom, black 0%, transparent 80%); pointer-events: none; user-select: none; }
.preview-label { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--orange-lt); display: flex; gap: 8px; align-items: center; }
@media screen { .preview-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.preview-body, .analisi-testo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-mid); }
.preview-body p, .analisi-testo p { margin-bottom: 16px; }
.preview-body p:last-child, .analisi-testo p:last-child { margin-bottom: 0; }
.preview-body strong, .analisi-testo strong { font-weight: 600; color: var(--ink); }
.preview-norm, .citazione-norm, .norm-inline { border-left: 2px solid var(--blue-mid); padding: 10px 16px; background: var(--blue-lt); border-radius: 0 var(--radius) var(--radius) 0; margin: 16px 0; font-size: 14px; font-style: italic; color: var(--blue-mid); line-height: 1.65; }
.norm-inline { border-left-color: var(--teal); background: var(--teal-lt); color: var(--teal); }
.cn-fonte, .ni-fonte { font-size: 11px; font-style: normal; font-weight: 700; margin-top: 6px; }
@media screen { .cn-fonte, .ni-fonte { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.paywall-gate { background: var(--white); border-top: 1px solid var(--rule); padding: 32px; text-align: center; position: relative; z-index: 2; }
.paywall-gate.gate-compact { padding: 28px 32px; }
.gate-icon { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--orange-lt); }
.gate-title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.gate-sub { font-size: 14px; color: var(--ink-muted); max-width: 420px; margin: 0 auto 22px; line-height: 1.6; }
.gate-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; margin: 0 auto 24px; text-align: left; }
.gf { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-mid); line-height: 1.4; }
@media screen { .gf { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.gf-check { color: var(--orange); font-weight: 700; flex-shrink: 0; }
.gate-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gate-btn-main { background: var(--orange); color: #fff; border: none; border-radius: var(--radius); padding: 12px 28px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; text-decoration: none; display: inline-block; }
.gate-btn-main:hover { background: var(--orange-dark); color: #fff; }
.gate-btn-sec { background: transparent; color: var(--ink-mid); border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 12px 24px; font-size: 15px; cursor: pointer; transition: all .15s; text-decoration: none; display: inline-block; }
.gate-btn-sec:hover { border-color: var(--blue); color: var(--blue); }

/* blocchi bloccati sfumati (alert/operativa dietro paywall) */
.blurred-wrap { filter: blur(3px); pointer-events: none; user-select: none; opacity: .35; }
.alert-box { border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); display: flex; gap: var(--sp-3); align-items: flex-start; }
.alert-box.ab-amber { background: var(--amber-lt); border-left: 3px solid var(--orange); }
.alert-box.ab-green { background: var(--green-lt); border-left: 3px solid var(--green); }
/* .box-tenue su .alert-box: sfondo quasi bianco (round 2, punto C,
   25-08-2026), stessa logica di .abstract-box.box-tenue sopra — non tocca
   le regole di base, condivise anche con Quesito/home. Bordo laterale
   invariato, resta l'accento a colore pieno. Contrasto testo (--ink-mid)
   verificato: 7.31-7.37:1 su tutte e tre le varianti. */
.alert-box.ab-amber.box-tenue { background: #FBF8F2; }
.alert-box.ab-green.box-tenue { background: #F5F9F6; }
.ab-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ab-label { font-size: 10px; font-weight: 700; margin-bottom: 4px; }
@media screen { .ab-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ab-amber .ab-label { color: var(--orange); }
.ab-green .ab-label { color: var(--green); }
.ab-text { font-size: 13px; line-height: 1.5; color: var(--ink-mid); }
@media screen { .ab-text { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ab-ruoli-list { margin: 0; padding-left: 18px; }
.ab-ruoli-list li { margin-bottom: 6px; }
.ab-ruoli-list li:last-child { margin-bottom: 0; }

.operativa-steps { display: flex; flex-direction: column; gap: 0; }
.step, .wf-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.step:last-child, .wf-step:last-child { border-bottom: none; }
.step-n, .wf-num { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media screen { .step-n, .wf-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.step-title, .wf-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.step-text, .wf-text { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .step-text, .wf-text { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* .refs-list/.ref-item/.ref-sigla/.ref-titolo rimosse (fix 26-08-2026):
   servivano solo al blocco "Riferimenti normativi citati" di
   single-quesito.php, tolto perché duplicava il meta-grid in testata —
   nessun altro template le usava. .ref-art lasciata (era già inutilizzata
   prima di questa modifica, non è una conseguenza di questo fix). */
.ref-art { font-size: 11px; color: var(--orange); margin-top: 1px; }
@media screen { .ref-art { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── FOCUS: sezioni numerate + indice ─────────────────────────── */
.indice-focus { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.if-header { background: var(--surface); padding: 9px 16px; border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 700; color: var(--ink-muted); }
@media screen { .if-header { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.if-item { display: flex; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.if-item:last-child { border-bottom: none; }
.if-num { font-size: 12px; font-weight: 700; color: var(--teal); min-width: 20px; flex-shrink: 0; }
@media screen { .if-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.if-tit { font-size: 13px; color: var(--ink); flex: 1; }
@media screen { .if-tit { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.if-anchor { font-size: 11px; color: var(--orange); flex-shrink: 0; }
@media screen { .if-anchor { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.if-anchor.locked { color: var(--ink-muted); }

/* Indice a due livelli (Quaderno, pilota Q01 28/08/2026) — il capitolo fa
   da intestazione di gruppo, il paragrafo è indentato sotto di esso. */
.if-item-capitolo { background: var(--surface); font-weight: 700; }
.if-item-capitolo .if-tit { font-weight: 700; }
.if-item-paragrafo { padding-left: 40px; }
.if-item-paragrafo .if-num { color: var(--ink-muted); font-weight: 500; }
.if-item-paragrafo .if-tit { color: var(--ink-mid); }

.focus-sezione { margin-bottom: 0; }
.fs-header { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0 14px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.fs-num { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--teal); color: #fff; font-family: var(--serif); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.fs-sezione-label { font-size: 10px; font-weight: 700; color: var(--teal); margin-bottom: 4px; }
@media screen { .fs-sezione-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fs-titolo { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--blue); line-height: 1.3; }
.fs-sottotitolo { font-size: 13px; color: var(--ink-muted); font-style: italic; margin-top: 3px; }
@media screen { .fs-sottotitolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fs-corpo { font-size: 15px; line-height: 1.85; color: var(--ink-mid); }
.fs-corpo p { margin-bottom: 14px; }
.fs-corpo p:last-child { margin-bottom: 0; }
.fs-corpo strong { font-weight: 600; color: var(--ink); }

.criticita-box { background: var(--amber-lt); border: 1px solid rgba(122,72,0,.15); border-radius: var(--radius); padding: 14px 18px; margin: 16px 0; }
.cr-label { font-size: 10px; font-weight: 700; color: var(--amber); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
@media screen { .cr-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cr-testo { font-size: 13px; line-height: 1.6; color: var(--ink-mid); }
@media screen { .cr-testo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.takeaway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.takeaway { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; border-top: 3px solid var(--teal); }
.tk-label { font-size: 10px; font-weight: 700; color: var(--teal); margin-bottom: 6px; }
@media screen { .tk-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tk-testo { font-size: 13px; color: var(--ink-mid); line-height: 1.5; }
@media screen { .tk-testo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tk-testo strong { color: var(--ink); font-weight: 600; }

.nav-sezioni { padding: 8px 0; }
.ns-item { display: flex; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; align-items: center; }
.ns-item:last-child { border-bottom: none; }
.ns-item:hover { background: var(--surface); }
.ns-item.active { background: var(--teal-lt); }
.ns-num { width: 20px; height: 20px; border-radius: 50%; background: var(--teal-lt); color: var(--teal); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media screen { .ns-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ns-item.active .ns-num { background: var(--teal); color: #fff; }
.ns-tit { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.3; }
@media screen { .ns-tit { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ns-lock { font-size: 12px; color: var(--ink-muted); }
@media screen { .ns-lock { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.norma-side { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.norma-side:last-child { border-bottom: none; }
.ns-sigla { font-size: 10px; font-weight: 700; background: var(--blue-lt); color: var(--blue); padding: 2px 7px; border-radius: 4px; display: inline-block; margin-bottom: 5px; }
@media screen { .ns-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ns-titolo { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
@media screen { .ns-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ns-art { font-size: 11px; color: var(--orange); margin-bottom: 4px; }
@media screen { .ns-art { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ns-counts { display: flex; gap: 6px; }

/* ── DOSSIER / QUADERNO: indice sempre pubblico ───────────────── */
.indice-dossier { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 4px; }
.indice-header { background: var(--blue); padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; }
.ih-title { font-size: 12px; font-weight: 700; color: #fff; }
@media screen { .ih-title { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ih-count { font-size: 11px; color: rgba(255,255,255,.6); }
@media screen { .ih-count { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.indice-item { display: flex; gap: 0; border-bottom: 1px solid var(--rule); }
.indice-item:last-child { border-bottom: none; }
.ii-num { min-width: 48px; padding: 12px 16px; background: var(--surface); border-right: 1px solid var(--rule); font-size: 12px; font-weight: 700; color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media screen { .ii-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ii-body { flex: 1; padding: 12px 18px; }
.ii-titolo { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 3px; }
.ii-sub { font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
@media screen { .ii-sub { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ii-lock { padding: 12px 16px; display: flex; align-items: center; color: var(--ink-muted); font-size: 16px; flex-shrink: 0; }

.preview-sec-label { font-size: 13px; font-weight: 600; color: var(--blue); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
@media screen { .preview-sec-label { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.psl-num { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media screen { .psl-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── NORMATIVA: indice articoli ───────────────────────────────── */
.indice-section { background: var(--white); border: 1px solid var(--rule); border-top: none; padding: 24px 32px; }
.indice-controls { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.indice-search { flex: 1; display: flex; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; min-width: 200px; }
.indice-search input { flex: 1; border: none; outline: none; padding: 9px 14px; font-size: 14px; font-family: var(--sans); background: transparent; color: var(--ink); }
.indice-search button { background: transparent; border: none; padding: 9px 14px; cursor: pointer; color: var(--ink-muted); font-size: 15px; }
.indice-toggle { font-size: 12px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white); color: var(--ink-muted); cursor: pointer; white-space: nowrap; transition: all .15s; }
@media screen { .indice-toggle { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.indice-toggle:hover { border-color: var(--blue); color: var(--blue); }

.parte-gruppo { margin-bottom: 8px; }
.parte-header { background: var(--blue); color: #fff; padding: 8px 14px; border-radius: var(--radius); font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; transition: background .15s; }
@media screen { .parte-header { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.parte-header:hover { background: var(--blue-mid); }
.parte-arrow { font-size: 10px; transition: transform .2s; }
@media screen { .parte-arrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.parte-header.open .parte-arrow { transform: rotate(90deg); }
.art-list { display: flex; flex-direction: column; gap: 1px; }
.art-item { display: flex; gap: 0; cursor: pointer; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); transition: border-color .15s; }
.art-item:hover { border-color: var(--orange); }
.art-item.has-content { border-color: var(--orange-lt); }
.art-item.has-content:hover { border-color: var(--orange); }
.art-num { min-width: 72px; padding: 10px 14px; background: var(--surface); border-right: 1px solid var(--rule); font-size: 12px; font-weight: 700; color: var(--ink-mid); display: flex; align-items: center; }
@media screen { .art-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-item.has-content .art-num { background: var(--orange-lt); color: var(--orange); }
.art-rubrica { flex: 1; padding: 10px 14px; font-size: 13px; color: var(--ink); display: flex; align-items: center; }
@media screen { .art-rubrica { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-item.has-content .art-rubrica { font-weight: 500; color: var(--ink); }
.art-badges { padding: 10px 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ab { font-size: 10px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; font-weight: 600; }
@media screen { .ab { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ab-s { background: var(--amber-lt); color: var(--amber); }
.ab-q { background: var(--green-lt);  color: var(--green); }
.ab-c { background: var(--blue-lt);   color: var(--blue-mid); }
.ab-ed { background: var(--orange-lt); color: var(--orange); border: 1px solid rgba(200,90,0,.2); }

.art-testo-wrap { border: 1px solid var(--orange); border-top: none; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); overflow: hidden; display: none; }
.art-testo-wrap.open { display: block; }
.art-testo-header { background: var(--orange-lt); padding: 12px 18px; border-bottom: 1px solid rgba(200,90,0,.15); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.ath-sigla { font-size: 12px; font-weight: 700; color: var(--orange); }
@media screen { .ath-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ath-actions { display: flex; gap: 8px; }
.ath-btn { font-size: 11px; padding: 4px 10px; border-radius: var(--radius); border: 1px solid rgba(200,90,0,.3); background: var(--white); color: var(--orange); cursor: pointer; transition: all .15s; text-decoration: none; }
@media screen { .ath-btn { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ath-btn:hover { background: var(--orange); color: #fff; }
.ath-vigenza { font-size: 11px; color: var(--green); font-weight: 600; background: var(--green-lt); padding: 2px 8px; border-radius: 10px; margin-left: 10px; }
@media screen { .ath-vigenza { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-testo-body { padding: 20px 24px; }
.art-testo-body h4 { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--blue); margin-bottom: 12px; }
.art-testo-body p { font-size: 14px; line-height: 1.8; color: var(--ink-mid); margin-bottom: 10px; }
.art-testo-body p:last-child { margin-bottom: 0; }
.art-testo-body .lettera { padding-left: 20px; }
.art-corr { border-top: 1px solid var(--rule); padding: 14px 24px; background: var(--surface); }
.art-corr-title { font-size: 11px; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
@media screen { .art-corr-title { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-corr-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.art-corr-pill { font-size: 12px; padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white); color: var(--ink-mid); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 5px; }
@media screen { .art-corr-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-corr-pill:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-lt); }
.acp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.acp-sentenza { background: var(--c-sentenza); }
.acp-quesito  { background: var(--c-quesito); }
.acp-commento { background: var(--c-commento); }

.feed-compatto { display: flex; flex-direction: column; gap: 1px; }
.fc-item { padding: 14px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 14px; cursor: pointer; text-decoration: none; }
.fc-item:last-child { border-bottom: none; }
.fc-item:hover .fc-titolo { color: var(--orange); }
.fc-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
@media screen { .fc-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fc-badge.fcb-sen { background: var(--amber-lt); color: var(--amber); }
.fc-badge.fcb-que { background: var(--green-lt); color: var(--green); }
.fc-badge.fcb-com { background: var(--blue-lt); color: var(--blue-mid); }
.fc-badge.fcb-dos { background: var(--amber-lt); color: var(--amber); }
.fc-badge.fcb-art { background: var(--teal-lt); color: var(--teal); }
.fc-area { font-size: 11px; color: var(--ink-muted); margin-bottom: 3px; }
@media screen { .fc-area { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fc-titolo { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 3px; transition: color .15s; }
.fc-meta { font-size: 11px; color: var(--ink-muted); }
@media screen { .fc-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fc-art { font-size: 11px; color: var(--orange); margin-left: 8px; }
@media screen { .fc-art { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.vedi-altri { display: block; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; color: var(--orange); border-top: 1px solid var(--rule); cursor: pointer; text-decoration: none; }
@media screen { .vedi-altri { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.vedi-altri:hover { background: var(--orange-lt); }

.stat-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px; }
.sm-cell { text-align: center; padding: 12px 8px; background: var(--surface); border-radius: var(--radius); }
.sm-n { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--orange); }
.sm-label { font-size: 11px; color: var(--ink-muted); margin-top: 3px; }
@media screen { .sm-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── HERO BLU (home / hub area / hub attività) ────────────────── */
.hero-blu { background: var(--blue); padding: 40px 24px 0; position: relative; overflow: hidden; }
.hero-blu::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px); pointer-events: none; }
.hero-blu-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.hero-blu-top { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: end; }
.hb-kicker { font-size: 11px; font-weight: 600; color: var(--orange); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
@media screen { .hb-kicker { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hb-sigla { background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 3px; }
@media screen { .hb-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hb-title { font-family: var(--serif); font-size: 32px; font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 12px; }
.hb-desc { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.65; font-weight: 300; max-width: 520px; }
.hb-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding-bottom: 24px; }
.hbs-cell { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.hbs-n { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--orange); line-height: 1; }
.hbs-label { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px; }
@media screen { .hbs-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hb-resp-strip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 14px 18px; margin: 20px 0 4px; }
.hb-resp-strip { display: flex; align-items: center; gap: 12px; }
.hb-resp-strip p { margin: 0; }
.hrs-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); margin-bottom: 8px; }
@media screen { .hrs-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hrs-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hrs-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: 4px 10px; border-radius: 20px; }
@media screen { .hrs-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hrs-tag.alert { background: rgba(200,90,0,.3); border-color: var(--orange); color: #fff; }

.hero-search-bar { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); padding: 14px 24px; display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hsb-label { font-size: 12px; color: rgba(255,255,255,.5); white-space: nowrap; }
@media screen { .hsb-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hsb-box { flex: 1; display: flex; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.2); min-width: 200px; }
.hsb-box input { flex: 1; border: none; outline: none; padding: 10px 14px; font-size: 14px; font-family: var(--sans); color: var(--ink); }
.hsb-box input::placeholder { color: #bbb; }
.hsb-box button { background: var(--orange); border: none; padding: 10px 14px; cursor: pointer; color: #fff; font-size: 15px; }
.hsb-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.hsf { font-size: 11px; padding: 4px 10px; border-radius: 20px; cursor: pointer; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); transition: all .15s; white-space: nowrap; text-decoration: none; }
@media screen { .hsf { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hsf:hover, .hsf.active { background: var(--orange); border-color: var(--orange); color: #fff; }
/* Variante di .hsf per sfondo chiaro (hub Professione, ramo A dentro un
   .content-block bianco, 2026-08-05): stessi token colore della palette,
   solo bordo/testo scuri invece che bianco trasparente su navy. */
.hsf-light { font-size: 11px; padding: 4px 10px; border-radius: 20px; cursor: pointer; border: 1px solid var(--rule); color: var(--ink-muted); transition: all .15s; white-space: nowrap; text-decoration: none; }
@media screen { .hsf-light { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hsf-light:hover, .hsf-light.active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ── HOME: hero con ricerca ────────────────────────────────────── */
.hero { background: var(--blue); padding: 60px 24px 68px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px); pointer-events: none; }
.hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; position: relative; }
.hero-kicker { font-size: 11px; font-weight: 600; color: var(--orange); margin-bottom: 14px; }
@media screen { .hero-kicker { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hero-title { font-family: var(--serif); font-size: 38px; font-weight: 600; color: #fff; line-height: 1.22; margin-bottom: 18px; }
.hero-title em { font-style: italic; color: rgba(255,255,255,.72); }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 28px; font-weight: 300; max-width: 520px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-cta-main { background: var(--orange); color: #fff; border: none; border-radius: var(--radius); padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; text-decoration: none; display: inline-block; }
.hero-cta-main:hover { background: var(--orange-dark); color: #fff; }
.hero-cta-sec { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 12px 26px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all .15s; text-decoration: none; display: inline-block; }
.hero-cta-sec:hover { background: rgba(255,255,255,.18); color: rgba(255,255,255,.9); }
.hero-credenziali { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.hero-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 14px; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.hero-avatar img.avatar-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 50%; }
.hero-avatar img.avatar-logo { width: 70%; height: 70%; object-fit: contain; display: block; }
.hero-cred-text { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.4; }
@media screen { .hero-cred-text { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hero-cred-text strong { color: rgba(255,255,255,.9); font-weight: 500; }
.hero-search { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); padding: 24px; }
.hero-search-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); margin-bottom: 12px; }
@media screen { .hero-search-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.search-box { display: flex; background: #fff; border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.search-box input { flex: 1; border: none; outline: none; padding: 12px 16px; font-size: 14px; font-family: var(--sans); color: var(--ink); }
.search-box input::placeholder { color: #aaa; }
.search-box button { background: var(--orange); border: none; padding: 12px 16px; cursor: pointer; color: #fff; font-size: 16px; }
.search-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sf { font-size: 11px; padding: 4px 10px; border-radius: 20px; cursor: pointer; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); transition: all .15s; text-decoration: none; }
@media screen { .sf { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sf:hover, .sf.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.search-area-label { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 6px; letter-spacing: .04em; }
@media screen { .search-area-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.search-aree { display: flex; gap: 5px; flex-wrap: wrap; }
.sa { font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); transition: all .15s; text-decoration: none; }
@media screen { .sa { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sa:hover, .sa.active { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.9); background: var(--orange); }

/* ── HOME: sezioni generiche ───────────────────────────────────── */
.page-section { padding: 52px 24px; }
.page-section.on-surface { background: var(--surface); }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2px solid var(--orange); flex-wrap: wrap; gap: 10px; }
.section-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--blue); }
.section-sub { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
@media screen { .section-sub { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.see-all { font-size: 13px; font-weight: 600; color: var(--orange); white-space: nowrap; }
@media screen { .see-all { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.aree-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 20px; }
.area-card { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px 16px; background: var(--white); cursor: pointer; transition: all .2s; position: relative; overflow: hidden; text-decoration: none; display: block; }
.area-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--orange); opacity: 0; transition: opacity .2s; }
.area-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); }
.area-card:hover::after { opacity: 1; }
.area-icon { font-size: 24px; margin-bottom: 10px; line-height: 1; }
.area-icon .svgic { width: 26px; height: 26px; color: var(--orange); }
.area-nome { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--blue); line-height: 1.3; margin-bottom: 8px; }
.area-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.area-count-pill { font-size: 10px; font-weight: 600; color: var(--ink-muted); background: var(--surface); padding: 2px 7px; border-radius: 3px; }
@media screen { .area-count-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.area-count-pill span { color: var(--orange); }
.aree-servizio { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-muted); flex-wrap: wrap; }
@media screen { .aree-servizio { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aree-servizio a { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--rule); border-radius: 4px; padding: 4px 10px; transition: all .15s; }
@media screen { .aree-servizio a { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aree-servizio a:hover { color: var(--blue); border-color: var(--blue); }

.attivita-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.attivita-card { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 16px; background: var(--white); cursor: pointer; transition: all .2s; position: relative; text-decoration: none; display: block; }
.attivita-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.attivita-sigla { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--blue); background: var(--blue-lt); padding: 2px 7px; border-radius: 3px; margin-bottom: 8px; }
@media screen { .attivita-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.attivita-nome { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 5px; line-height: 1.3; }
.attivita-desc { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .attivita-desc { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.attivita-count { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; }
@media screen { .attivita-count { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.attivita-count span { font-weight: 600; color: var(--orange); }

.feed-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }
.feed-main { display: flex; flex-direction: column; gap: 1px; }
.feed-item { background: var(--white); padding: 16px 18px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; display: flex; gap: 14px; align-items: flex-start; text-decoration: none; }
.feed-item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 1px solid var(--rule); }
.feed-item:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-bottom: 1px solid var(--rule); }
.feed-item:hover { background: #FAFAF8; }
.tipo-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 3px; margin-top: 3px; }
@media screen { .tipo-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tb-sentenza  { background: var(--c-sentenza-lt); color: var(--c-sentenza); }
.tb-quesito   { background: var(--c-quesito-lt); color: var(--c-quesito); }
.tb-commento  { background: var(--c-commento-lt); color: var(--c-commento); }
.tb-focus     { background: var(--c-focus-lt); color: var(--c-focus); }
.tb-dossier   { background: var(--c-dossier-lt); color: var(--c-dossier); }
.tb-quaderno  { background: var(--c-quaderno-lt); color: var(--c-quaderno); }
.tb-normativa { background: var(--blue-lt); color: var(--blue-mid); }
.tb-podcast   { background: var(--blue-lt); color: var(--podcast-blue); }
.feed-meta { flex: 1; min-width: 0; }
.feed-area, .feed-norm { font-size: 11px; font-weight: 600; color: var(--orange); margin-bottom: 3px; }
@media screen { .feed-area, .feed-norm { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-titolo { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 4px; }
.feed-estratto { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .feed-estratto { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-estratto-fade { display: block; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 100%); mask-image: linear-gradient(to right, #000 75%, transparent 100%); }
/* Avviso generico per il non loggato al posto di un estratto vero (regola del 30/07/2026) — niente dissolvenza, non c'è testo reale da sfumare. */
.feed-estratto-locked { display: block; font-style: italic; color: var(--ink-muted); }
.feed-estratto mark { background: var(--orange-lt); color: var(--orange-dark); padding: 0 2px; border-radius: 2px; }
.feed-data { font-size: 11px; color: var(--ink-muted); margin-top: 5px; }
@media screen { .feed-data { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-item-righe .feed-data { margin-top: 0; margin-bottom: 3px; font-weight: 600; letter-spacing: .02em; }
/* Prima in arancione (nome classe originale: .feed-data-arancio) — data
   demotata a grigio muted, coerente col resto della gerarchia eyebrow
   (REGIA UI-liste_secondo-colore-eyebrow_31-08-2026, punto 1: l'arancione
   resta solo per interattività/stato). */
.feed-data-primaria { color: var(--ink-muted); }
.feed-data .feed-sep { margin: 0 5px; opacity: .5; }
.feed-footer { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.feed-attivita, .feed-area-pill { font-size: 10px; color: var(--blue); background: var(--blue-lt); padding: 2px 7px; border-radius: 3px; }
@media screen { .feed-attivita, .feed-area-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-lock { font-size: 12px; color: var(--ink-muted); flex-shrink: 0; margin-top: 3px; }
@media screen { .feed-lock { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.feed-aside { display: flex; flex-direction: column; gap: 16px; }
.aside-block { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.aside-head { padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 700; color: var(--orange); display: flex; align-items: center; gap: 7px; }
@media screen { .aside-head { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.aside-sub { font-size: 11.5px; color: var(--ink-muted); padding: 8px 14px 0; }
@media screen { .aside-sub { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── HUB PROFESSIONE (29/08/2026): box "Prima di tutto" e griglia "Accedi
   per argomento" — nuovi, nessuna classe qui riusata altrove. */
.why-panel { background: var(--amber-lt); border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 28px; }
.why-panel .eyebrow { font-size: 11px; font-weight: 700; color: var(--orange-dark); margin-bottom: 8px; display: block; }
@media screen { .why-panel .eyebrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.why-panel h2 { font-size: 19px; margin-bottom: 10px; }
.why-panel p { font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); margin: 0; }
.why-panel p + p { margin-top: 10px; }

.argomento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
@media (max-width: 600px) { .argomento-grid { grid-template-columns: 1fr; } }
.argomento-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.argomento-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.argomento-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
@media screen { .argomento-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.argomento-card.n2 .argomento-num { background: var(--blue-mid); }
.argomento-card.n3 .argomento-num { background: var(--amber-dark); }
.argomento-card.n4 .argomento-num { background: var(--green-mid); }
.argomento-card h4 { font-size: 14.5px; margin-bottom: 5px; color: var(--ink); }
.argomento-card p { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; margin: 0 0 8px; }
@media screen { .argomento-card p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.argomento-card .counts { display: flex; gap: 10px; font-size: 11px; color: var(--ink-muted); font-weight: 600; flex-wrap: wrap; }
@media screen { .argomento-card .counts { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.argomento-card .counts b { color: var(--ink); }
.argomento-select { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 11px; font-size: 13px; color: var(--ink); background: var(--white); margin-top: 4px; }
@media screen { .argomento-select { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-item { padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; text-decoration: none; display: block; }
.aside-item:last-child { border-bottom: none; }
.aside-item:hover { background: var(--surface); }
.aside-item-nome { font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 2px; }
@media screen { .aside-item-nome { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-item-meta { font-size: 11px; color: var(--ink-muted); }
@media screen { .aside-item-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── STATS: barra numeri home pubblica — reintrodotta il 2026-07-29
   sul mockup "29 luglio" (era stata rimossa il 27/07 perché assente
   dal mockup di allora). Numeri sempre calcolati dal vero
   (wp_count_posts in front-page.php), mai statici. */
.stats { background: var(--blue); padding: 34px 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); row-gap: 22px; text-align: center; max-width: 1200px; margin: 0 auto; }
.stat b { font-family: var(--serif); font-size: 27px; font-weight: 600; display: block; color: var(--rust-on-dark); }
.stat span { font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .03em; }
@media screen { .stat span { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.piani-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 28px; }
.piano { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.piano.featured { border-color: var(--orange); border-width: 2px; }
.piano-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--rule); }
.piano.featured .piano-head { background: var(--orange-lt); }
.piano-tag { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 5px; }
@media screen { .piano-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.piano-nome { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--blue); margin-bottom: 5px; }
.piano-desc { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .piano-desc { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.piano-features { padding: 16px 22px; }
.piano-feature { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-mid); padding: 4px 0; border-bottom: 1px solid var(--rule); }
@media screen { .piano-feature { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.piano-feature:last-child { border-bottom: none; }
.pf-check { color: var(--orange); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.piano-fasce { padding: 4px 22px 14px; border-top: 1px solid var(--rule); }
.piano-fascia { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-mid); padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.piano-fascia:last-child { border-bottom: none; }
.pf-fascia-label { color: var(--ink-muted); }
.pf-fascia-prezzo { font-weight: 600; color: var(--blue); text-align: right; }
.pf-fascia-prezzo em { font-weight: 400; font-style: normal; color: var(--ink-muted); }
.piano-foot { padding: 14px 22px; border-top: 1px solid var(--rule); }
.piano-foot .btn-outline, .piano-foot .btn-primary { width: 100%; text-align: center; }
.piani-nota-convenzioni { text-align: center; font-size: 12.5px; color: var(--ink-muted); margin-top: 18px; }
@media screen { .piani-nota-convenzioni { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── PAGINE GENERICHE (chi siamo, hub) — content-block ────────── */
.content-block { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; }
.cb-head { padding: 16px 20px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cb-title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 10px; }
.cb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.cb-count { font-size: 12px; color: var(--ink-muted); }
@media screen { .cb-count { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cb-see-all { font-size: 12px; font-weight: 600; color: var(--orange); }
@media screen { .cb-see-all { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.obbl-list { padding: 8px 0; }
.obbl-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.obbl-item:last-child { border-bottom: none; }
.obbl-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
@media screen { .obbl-num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.obbl-num.alert { background: var(--orange); }
.obbl-titolo { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.4; }
.obbl-desc { font-size: 13px; color: var(--ink-muted); line-height: 1.6; }
@media screen { .obbl-desc { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.obbl-rif { display: inline-block; margin-top: 6px; margin-right: 6px; font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-lt); padding: 2px 8px; border-radius: 3px; }
@media screen { .obbl-rif { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.obbl-rif.orange { color: var(--orange); background: var(--orange-lt); }

.norm-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; text-decoration: none; }
.norm-item:last-child { border-bottom: none; }
.norm-item:hover { background: var(--surface); }
.norm-sigla { flex-shrink: 0; font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-lt); padding: 6px 10px; border-radius: var(--radius); min-width: 80px; text-align: center; line-height: 1.3; }
@media screen { .norm-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-titolo { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 3px; line-height: 1.4; }
.norm-rif, .norm-meta { font-size: 12px; color: var(--ink-muted); margin-bottom: 5px; }
@media screen { .norm-rif, .norm-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Conteggi contenuti redazionali collegati a una normativa, aggiunti
   2026-07-28: solo icona + numero, mai un colore diverso per tipo (stessa
   regola di .ctype) — sostituiscono i vecchi .norm-pill/.np-* colorati. */
.norm-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); margin-right: 12px; }
@media screen { .norm-cnt { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Riga di riferimento sentenza (organo, sezione, data — mai il numero)
   nell'elenco pubblico, aggiunta 2026-07-28. */
.feed-rif { font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
@media screen { .feed-rif { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Card feed hub unificata (accademia_hub_feed_card, 14/08/2026) — tag di
   ruolo/attività ed estratto di una riga, condivisi da Sentenza/Commento/
   Quesito/Focus (prima solo Sentenza aveva un riferimento puntuale). */
.feed-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.feed-tag { font-size: 10.5px; font-weight: 500; color: var(--ink-mid); }
@media screen { .feed-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-estratto { font-size: var(--fs-caption); color: var(--ink-muted); margin-top: 4px; line-height: var(--lh-caption); }
/* Filtri anno / tipo atto / organo giudicante nella testata elenco,
   aggiunti 2026-07-28 — stesso stile del select di ordinamento già
   esistente (.ricerca-sort select). */
.ricerca-filtri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ricerca-filtri input[type="text"], .ricerca-filtri select { font-size: 13px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--ink-mid); }
@media screen { .ricerca-filtri input[type="text"], .ricerca-filtri select { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ricerca-filtri input[type="text"] { width: 110px; }
.norm-pills, .norm-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.np { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; }
@media screen { .np { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.np-s, .norm-pill.np-sentenza { background: var(--c-sentenza-lt); color: var(--c-sentenza); }
.np-q, .norm-pill.np-quesito  { background: var(--c-quesito-lt); color: var(--c-quesito); }
.np-c, .norm-pill.np-commento { background: var(--c-commento-lt); color: var(--c-commento); }
.norm-pill.np-dossier { background: var(--c-dossier-lt); color: var(--c-dossier); }
.norm-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 3px; }
@media screen { .norm-pill { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-stato { flex-shrink: 0; align-self: center; }
.stato-vigente { font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-lt); padding: 3px 8px; border-radius: 3px; }
@media screen { .stato-vigente { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); }
.dossier-item { background: var(--white); padding: 18px 20px; cursor: pointer; transition: background .15s; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.dossier-item:hover { background: #FAFAF8; }
.dos-tipo { font-size: 10px; font-weight: 700; color: var(--orange); }
@media screen { .dos-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dos-titolo { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--blue); line-height: 1.35; }
.dos-desc { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .dos-desc { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dos-meta { font-size: 11px; color: var(--ink-muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media screen { .dos-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dos-lock { font-size: 11px; font-weight: 600; color: var(--orange); }
@media screen { .dos-lock { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.corso-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.corso-item:last-child { border-bottom: none; }
.corso-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius); background: var(--blue-lt); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.corso-titolo { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.corso-meta { font-size: 12px; color: var(--ink-muted); }
@media screen { .corso-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.corso-cta { flex-shrink: 0; align-self: center; font-size: 12px; font-weight: 600; color: var(--orange); border: 1px solid var(--orange); border-radius: var(--radius); padding: 5px 12px; transition: all .15s; text-decoration: none; }
@media screen { .corso-cta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.corso-cta:hover { background: var(--orange); color: #fff; }

.altre-att-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px; }
.alt-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: all .15s; background: var(--surface); text-align: center; text-decoration: none; display: block; }
.alt-card:hover { border-color: var(--orange); background: var(--white); }
.alt-sigla { font-size: 11px; font-weight: 700; color: var(--blue); background: var(--blue-lt); padding: 2px 7px; border-radius: 3px; display: inline-block; margin-bottom: 6px; }
@media screen { .alt-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.alt-nome { font-size: 12px; font-weight: 600; color: var(--blue); line-height: 1.3; }
@media screen { .alt-nome { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.rischio-list { padding: 8px 0; }
.rischio-item { padding: 9px 14px; border-bottom: 1px solid var(--rule); display: flex; align-items: flex-start; gap: 10px; }
.rischio-item:last-child { border-bottom: none; }
.risk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.risk-alto { background: #C0392B; }
.risk-medio { background: var(--orange); }
.risk-basso { background: var(--green); }
.risk-testo { font-size: 12px; color: var(--ink-mid); line-height: 1.5; }
@media screen { .risk-testo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.risk-testo strong { color: var(--ink); font-weight: 600; }

.tipo-counts { padding: 8px 0; }
.tc-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.tc-row:last-child { border-bottom: none; }
.tc-row:hover { background: var(--surface); }
.tc-label { font-size: 13px; font-weight: 500; color: var(--ink-mid); display: flex; align-items: center; gap: 8px; }
@media screen { .tc-label { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tc-dot.dot-sentenza { background: var(--c-sentenza); }
.tc-dot.dot-quesito  { background: var(--c-quesito); }
.tc-dot.dot-commento { background: var(--c-commento); }
.tc-dot.dot-focus    { background: var(--c-focus); }
.tc-dot.dot-dossier  { background: var(--c-dossier); }
.tc-dot.dot-normativa{ background: var(--blue); }
.tc-n { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--orange); }

.attivita-list, .area-list { padding: 8px 0; }
.att-item, .area-item { padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; text-decoration: none; display: block; }
.area-item { display: flex; justify-content: space-between; align-items: center; }
.att-item:last-child, .area-item:last-child { border-bottom: none; }
.att-item:hover, .area-item:hover { background: var(--surface); }
.att-nome, .area-nome-side { font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 2px; }
@media screen { .att-nome, .area-nome-side { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.att-meta, .area-c { font-size: 11px; color: var(--ink-muted); }
@media screen { .att-meta, .area-c { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.side-norm-item { padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.side-norm-item:last-child { border-bottom: none; }
.side-norm-item:hover { background: var(--surface); }
.side-norm-sigla { font-size: 11px; font-weight: 700; color: var(--orange); margin-bottom: 2px; }
@media screen { .side-norm-sigla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-norm-titolo { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
@media screen { .side-norm-titolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-norm-meta { font-size: 11px; color: var(--ink-muted); }
@media screen { .side-norm-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── CHI SIAMO: hero pagina interna + prosa ───────────────────── */
.hero-page { background: var(--white); padding: 44px 24px 48px; border-bottom: 3px solid var(--orange); position: relative; }
.hero-page-inner { max-width: 1200px; margin: 0 auto; }
.hero-page .hero-title { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--blue); line-height: 1.2; margin-bottom: 14px; }
.hero-page .hero-sub { font-size: 16px; color: var(--ink-muted); line-height: 1.7; font-weight: 400; max-width: 640px; }
.hero-chi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--rule); }
.hero-chi-card { display: flex; align-items: flex-start; gap: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; border-top: 3px solid var(--orange); }
.hcc-logo { width: 52px; height: 52px; border-radius: var(--radius); background: var(--blue); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.hcc-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.hcc-ruolo { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 4px; }
@media screen { .hcc-ruolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hcc-nome { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--blue); margin-bottom: 4px; line-height: 1.3; }
.hcc-desc { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .hcc-desc { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Pagina Chi siamo, 26/09/2026: immagini reali nelle card della hero (come
   in home: logo Tecnojus su disco #3f6e9c al 70%, foto a disco pieno) e
   card impilate sotto i 760px (prima restavano affiancate e uscivano dallo
   schermo su mobile). */
.hcc-logo.hcc-logo-img { border-radius: 50%; background: #3f6e9c; overflow: hidden; }
.hcc-logo.hcc-logo-img img { width: 70%; height: 70%; object-fit: contain; display: block; }
.hcc-avatar.hcc-avatar-img { overflow: hidden; background: var(--surface); }
.hcc-avatar.hcc-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@media (max-width: 760px) { .hero-chi-grid { grid-template-columns: 1fr; gap: 14px; } }
/* Menu di sezione Chi siamo: barra orizzontale solo dove ci sta tutta,
   altrimenti menu contestuale a tendina (niente scorrimento orizzontale). */
.ctx-menu-chi-wrap { display: none; position: sticky; top: var(--navbar-h, 123px); z-index: 50; }
.ctx-menu-chi-wrap .ctx-menu-chi { position: relative; top: auto; }
@media (max-width: 1180px) {
  .sticky-bar-chi { display: none; }
  .ctx-menu-chi-wrap { display: block; }
}

.page-body-full { max-width: 1200px; margin: 0 auto; padding: 48px 24px 64px; }
.page-grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 48px; }
.prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-mid); }
.prose p { margin-bottom: var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; color: var(--ink); }
.prose a { text-decoration: underline; }
/* Il blocco "Citazione" di Gutenberg eredita l'aspetto del vecchio
   componente .citazione, così un editor senza toccare codice ottiene
   lo stesso risultato visivo semplicemente citando un testo. */
.prose blockquote { background: var(--blue); color: #fff; border-radius: var(--radius-lg); padding: 28px 32px; margin: 28px 0; position: relative; }
.prose blockquote::before { content: '\00AB'; font-family: var(--serif); font-size: 72px; font-weight: 600; color: var(--orange); opacity: .4; position: absolute; top: -8px; left: 20px; line-height: 1; }
.prose blockquote p { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.6; color: #fff; font-style: italic; padding-left: 12px; margin-bottom: 8px; }
.prose blockquote cite { display: block; font-size: 12px; font-style: normal; color: rgba(255,255,255,.55); padding-left: 12px; }
@media screen { .prose blockquote cite { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Elenco puntato/numerato: bullet/numerazione tradizionale, MAI il
   riquadro con bordo laterale colorato — quello resta riservato a
   .prose blockquote sopra, per citazioni/affermazioni isolate (bug
   trovato in REGIA_scheda_commento_punch_list 25-08-2026, punto 10: prima
   ul/ol e blockquote erano visivamente indistinguibili, entrambi un
   riquadro colorato). Classe globale, condivisa da tutti i CPT che usano
   .prose: la correzione vale ovunque, non solo su commento. */
.prose ul, .prose ol { margin: 16px 0; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul li, .prose ol li { background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 8px; font-size: inherit; line-height: inherit; }
.prose ul li:last-child, .prose ol li:last-child { margin-bottom: 0; }

.content-section-prose { margin-bottom: 48px; }
/* Pagine informative (page.php: privacy, disclaimer, condizioni,
   convenzioni) — testi normativi con molte sezioni brevi: titolo di
   sezione più contenuto di quello di Chi siamo, sottotitoli H3 per i
   sottoparagrafi (es. 2.1/2.2 delle Condizioni). 25/09/2026. */
.pagina-info .content-section-prose { margin-bottom: 32px; scroll-margin-top: 120px; }
.pagina-info .csp-title { font-size: 19px; margin-bottom: 14px; padding-bottom: 10px; border-bottom-width: 1px; }
.pagina-info .prose h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--blue); margin: 22px 0 10px; }
/* Sottotitoli H3 dentro le sezioni di Chi siamo / Metodo Tecnojus (es. i due
   autori di «Le matrici culturali», 06/10/2026): stesso trattamento delle
   pagine informative. */
.content-section-prose .prose h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blue); margin: 32px 0 12px; }
.content-section-prose .prose blockquote cite { margin-top: 12px; font-style: italic; }
/* Citazione a frammenti (Metodo Tecnojus, Bezzi, 07/10/2026): passi presi
   da punti diversi, separati in wp-admin da un paragrafo «...». Ogni
   frammento resta un paragrafo a sé; l'omissione è un segno centrato e
   tenue, non testo della citazione. */
.prose blockquote.cit-frammenti p { font-size: 17px; margin-bottom: 0; }
.prose blockquote.cit-frammenti p.cit-omissis { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 20px; letter-spacing: .35em; text-align: center; color: var(--orange); margin: 8px 0; padding-left: 0; line-height: 1; }
.prose blockquote.cit-frammenti cite { margin-top: 20px; }
.pagina-info-intro { margin-bottom: 32px; }
.pagina-info-indice { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; }
@media screen { .pagina-info-indice { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pagina-info-indice a { color: var(--ink-mid); text-decoration: none; }
.pagina-info-indice a:hover, .pagina-info-indice a.attiva { color: var(--orange); }
.pagina-info-indice a.attiva { font-weight: 600; }
/* Sotto i 900px (stessa soglia del .sidebar{order:-1} globale) il testo
   viene prima e la colonna laterale dopo, come su single-sentenza
   (Addendum 14); l'indice di pagina, in fondo, non servirebbe più. */
@media (max-width: 900px) {
  .pagina-info .sidebar { order: 0; }
  .pagina-info .sidebar .side-block:has(.pagina-info-indice a[href^="#"]) { display: none; }
}
.csp-label { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 8px; }
@media screen { .csp-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.csp-title { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--blue); line-height: 1.3; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--orange); }

.citazione { background: var(--blue); color: #fff; border-radius: var(--radius-lg); padding: 28px 32px; margin: 28px 0; position: relative; }
.citazione::before { content: '\00AB'; font-family: var(--serif); font-size: 72px; font-weight: 600; color: var(--orange); opacity: .4; position: absolute; top: -8px; left: 20px; line-height: 1; }
.citazione-testo { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.6; color: #fff; font-style: italic; padding-left: 12px; }
.citazione-fonte { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 12px; padding-left: 12px; }
@media screen { .citazione-fonte { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.persona-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 28px; display: flex; gap: 24px; align-items: flex-start; }
.persona-avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.persona-nome { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--blue); margin-bottom: 3px; }
.persona-ruolo { font-size: 13px; font-weight: 600; color: var(--orange); margin-bottom: 10px; letter-spacing: .02em; }
@media screen { .persona-ruolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.persona-bio { font-size: 14px; color: var(--ink-mid); line-height: 1.7; }
.persona-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.persona-tag { font-size: 11px; font-weight: 500; color: var(--blue); background: var(--blue-lt); padding: 3px 9px; border-radius: 3px; }
@media screen { .persona-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.ist-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 24px; }
.ist-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ist-logo { width: 48px; height: 48px; border-radius: var(--radius); background: var(--blue); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
@media screen { .ist-logo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ist-nome { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--blue); }
.ist-tipo { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .ist-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ist-desc { font-size: 14px; color: var(--ink-mid); line-height: 1.7; }
.ist-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--orange); }
@media screen { .ist-link { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.caratteristiche { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.car-item { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; border-left: 3px solid var(--orange); }
.car-titolo { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 6px; }
@media screen { .car-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.car-desc { font-size: 12px; color: var(--ink-muted); line-height: 1.6; }
@media screen { .car-desc { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.societa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.soc-item { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; }
.soc-label { font-size: 10px; font-weight: 700; color: var(--ink-muted); margin-bottom: 4px; }
@media screen { .soc-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.soc-value { font-size: 14px; font-weight: 500; color: var(--ink); }

.side-link-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; text-decoration: none; }
.side-link-item:last-child { border-bottom: none; }
.side-link-item:hover { background: var(--surface); }
.sli-nome { font-size: 13px; font-weight: 500; color: var(--blue); }
@media screen { .sli-nome { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sli-arrow { font-size: 12px; color: var(--ink-muted); }
@media screen { .sli-arrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── FOOTER ────────────────────────────────────────────────────── */
footer.at-footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 40px 24px 24px; font-size: 13px; }
@media screen { footer.at-footer { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 28px; }
.footer-brand { font-family: var(--serif); font-size: 18px; color: #fff; margin-bottom: 8px; }
.footer-tagline { font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
@media screen { .footer-tagline { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.footer-credenziali { font-size: 11px; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; line-height: 1.6; }
@media screen { .footer-credenziali { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.footer-nota-autore { font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.5); margin: 0 0 16px; }
@media screen { .footer-nota-autore { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.footer-nota-autore a { color: rgba(255,255,255,.7); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.footer-nota-autore a:hover { color: #fff; }
.footer-col-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); margin-bottom: 12px; }
@media screen { .footer-col-title { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.footer-link { display: block; font-size: 13px; color: rgba(255,255,255,.6); padding: 3px 0; }
@media screen { .footer-link { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.footer-link:hover { color: #fff; }
/* Riga icone canali social, aggiunta 2026-07-28: nessun link reale ancora
   fornito da Romolo, sono segnaposto (vedi footer.php) — piu' spente
   (opacity) delle altre voci per segnalarlo visivamente senza nasconderle. */
.footer-social { display: flex; gap: 14px; margin-top: 14px; }
.footer-social .svgic { width: 18px; height: 18px; color: rgba(255,255,255,.5); opacity: .55; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; flex-wrap: wrap; gap: 8px; }
@media screen { .footer-bottom { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── RICERCA INTERNA ───────────────────────────────────────────── */
.ricerca-hero { background: var(--blue); padding: 32px 24px; }
.ricerca-search-box { display: flex; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.2); margin-bottom: 14px; }
.ricerca-search-box input { flex: 1; border: none; outline: none; padding: 14px 18px; font-size: 15px; font-family: var(--sans); color: var(--ink); }
.ricerca-search-box button { background: var(--orange); border: none; padding: 14px 20px; cursor: pointer; color: #fff; font-size: 17px; }
.ricerca-quick-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.rqf { font-size: 12px; padding: 5px 12px; border-radius: 20px; cursor: pointer; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); transition: all .15s; text-decoration: none; }
@media screen { .rqf { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rqf:hover, .rqf.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
.ricerca-tabs { background: var(--white); border-bottom: 1px solid var(--rule); position: sticky; top: var(--navbar-h, 123px); z-index: 50; overflow-x: auto; box-shadow: var(--shadow-sm); }
.ricerca-tabs-inner { display: flex; align-items: center; }
.rtab { font-size: 13px; font-weight: 500; color: var(--ink-muted); padding: 13px 18px; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; text-decoration: none; display: flex; gap: 6px; align-items: center; }
@media screen { .rtab { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rtab:hover { color: var(--orange); }
.rtab.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }
.rtab-n { font-size: 11px; background: var(--surface); color: var(--ink-muted); padding: 1px 7px; border-radius: 10px; }
@media screen { .rtab-n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rtab.active .rtab-n { background: var(--orange-lt); color: var(--orange); }
.ricerca-body { padding: 28px 24px 64px; }
/* 1fr 300px, non 300px 1fr: contenuto principale a sinistra, colonna di
   servizio (filtri) a destra — coerente con main+aside di taxonomy-
   area_tematica.php/page-chi-siamo.php altrove nel tema. Invertita il
   28/07 su segnalazione di Romolo (era nell'ordine sbagliato). Usata
   solo da archive.php. */
.ricerca-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.rf-block { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rf-head { padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 700; color: var(--blue); }
@media screen { .rf-head { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rf-body { padding: 10px 14px; }
.rf-check { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--ink-mid); cursor: pointer; }
@media screen { .rf-check { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rf-check input { accent-color: var(--orange); }
.rf-check .rf-n { font-size: 11px; color: var(--ink-muted); }
@media screen { .rf-check .rf-n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ricerca-results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.ricerca-count { font-size: 14px; color: var(--ink-mid); }
.ricerca-count strong { color: var(--blue); }
.ricerca-sort select { font-size: 13px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--ink-mid); }
@media screen { .ricerca-sort select { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.risultato-item { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; display: flex; gap: 14px; align-items: flex-start; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.risultato-item:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.risultato-item.riservato { position: relative; }
.risultato-body { flex: 1; min-width: 0; }
.risultato-norma { font-size: 11px; font-weight: 600; color: var(--orange); margin-bottom: 3px; }
@media screen { .risultato-norma { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.risultato-titolo { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 5px; }
.risultato-titolo mark, .risultato-estratto mark { background: var(--orange-lt); color: var(--orange-dark); padding: 0 2px; border-radius: 2px; }
.risultato-estratto { font-size: 13px; color: var(--ink-muted); line-height: 1.6; margin-bottom: 6px; }
@media screen { .risultato-estratto { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.risultato-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--ink-muted); }
@media screen { .risultato-meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Addendum 14, punto 3 (21/09/2026): OFFSET DINAMICI delle barre fisse. assets/js/sticky-layout.js misura l'altezza reale
   di nav.navbar (ResizeObserver + caricamento) e la scrive in --navbar-h su :root; --stickbar-h è l'altezza della barra
   "Contenuti" (0 se la pagina non l'ha). Barre sticky: top: var(--navbar-h); colonne sticky: navbar + barra + 16px.
   Valori di ripiego se il JS non gira: 123px e 32px+16px → 171px, come prima. */
/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width: 1100px){
  .nav-area { padding: 0 10px; font-size: 12px; }
@media screen { .nav-area { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
}
@media(max-width: 900px){
  .hero-inner, .hero-blu-top { grid-template-columns: 1fr; }
  .hero-search { display: none; }
  .aree-grid { grid-template-columns: repeat(3,1fr); }
  .attivita-grid { grid-template-columns: repeat(2,1fr); }
  .feed-layout, .page-inner-grid, .page-grid, .page-grid-2, .ricerca-grid, .page-grid-cd { grid-template-columns: 1fr; }
  .sidebar { order: -1; }
  /* Colonna destra correlazioni → striscia orizzontale in cima, non sticky (Addendum 13/08). */
  .col-destra { order: -1; }
  .fascia-correlazioni { position: static; }
  .colonna-destra { order: -1; position: static; border-left: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 4px; flex-direction: row; gap: 24px; overflow-x: auto; }
  .cd-blocco { flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0; }
  .cd-label { margin-bottom: 0; white-space: nowrap; }
  .cd-item { flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: none; padding: 0; min-width: 130px; }
  .cd-item .cd-arrow { display: none; }
  .cd-azioni { flex-direction: row; border-top: none; padding-top: 0; margin-left: auto; flex-shrink: 0; }
  .stats-grid { grid-template-columns: repeat(3,1fr); }
  .piani-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hb-stats, .hero-blu .hb-stats { display: none; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .gate-features { grid-template-columns: 1fr; }
  .dossier-grid { grid-template-columns: 1fr; }
  .altre-att-grid { grid-template-columns: repeat(2,1fr); }
  .persona-card { flex-direction: column; }
  .caratteristiche, .societa-grid, .takeaway-grid { grid-template-columns: 1fr; }
}

/* ── HOME PUBBLICA (index.html) / HOME ABBONATO (home-abbonato.html) ──
   Componenti fedeli al mockup "24-25 luglio 2026" (accademia-mockup/),
   aggiunti il 2026-07-27. Classi nuove, non condivise con altri
   template (che restano su .sticky-bar/.hero-search/.feed-item/
   .search-box/.tipo-badge, invariati) — usate solo da front-page.php. */

.method-card { background: #101a33; border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: 22px 22px 20px; }
.method-card .eyebrow { font-size: 11px; font-weight: 600; color: var(--rust-on-dark); }
@media screen { .method-card .eyebrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.method-card h3 { color: #fff; font-size: 16px; margin: 8px 0 16px; font-weight: 600; }
.mstep { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-on-dark-2); }
.mstep:last-child { border-bottom: 0; }
.mstep .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rust-on-dark); flex-shrink: 0; opacity: .85; }
.mstep .txt { font-size: 12.6px; color: var(--text-on-dark-muted); font-family: var(--mono); }
@media screen { .mstep .txt { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.method-card .go { display: block; text-align: center; margin-top: 16px; padding: 10px; border: 1px solid var(--border-on-dark); border-radius: var(--radius); font-size: 12.5px; font-weight: 600; color: var(--rust-on-dark); text-decoration: none; }
.method-card .go:hover { border-color: var(--rust-on-dark); }

.searchbar { background: #fff; border-radius: var(--radius-lg); padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-md); max-width: 640px; }
.searchbar input { border: 0; outline: 0; flex: 1; font-size: 14.5px; font-family: var(--sans); padding: 10px 0; }
.searchbar .go2 { background: var(--orange); color: #fff; border: 0; border-radius: var(--radius); padding: 11px 20px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
@media screen { .searchbar .go2 { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.page-stick { background: var(--white); border-bottom: 1px solid var(--rule); position: sticky; top: var(--navbar-h, 123px); z-index: 50; box-shadow: var(--shadow-sm); }
.page-stick-inner { display: flex; align-items: center; justify-content: space-between; }
.page-stick .anchors { display: flex; gap: 2px; }
.page-stick a.anchor { padding: 13px 15px; font-size: 12.8px; font-weight: 600; color: var(--ink-muted); border-bottom: 2px solid transparent; text-decoration: none; }
@media screen { .page-stick a.anchor { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.page-stick a.anchor:hover, .page-stick a.anchor.active { color: var(--ink); border-bottom-color: var(--orange); }
.page-stick .cta { flex-shrink: 0; }
/* CORREZIONE Brief_ClaudeCode_Home_pubblica_29-08-2026 (punto 2): offset di
   scroll per le sezioni-ancora della home pubblica, misurato dal vero sul
   tema live (navbar 123px + .page-stick ~49px, non i 112px del mockup, che
   ha un header più basso) — selettori per ID, esclusivi di front-page.php,
   così non toccano lo scroll-margin di nessun'altra pagina. */
#cosa-facciamo, #chi-siamo, #metodo, #perche, #esempio, #aree, #proponi, #piani, #cosa-trovi, #vetrine { scroll-margin-top: 180px; }

.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.value-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; }
.value-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px; text-decoration: none; display: block; transition: .15s; }
.value-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.value-card .ic { font-size: 20px; color: var(--orange); }
.value-card .ic .svgic { width: 22px; height: 22px; }
.value-card h4 { font-size: 15px; margin-top: 10px; color: var(--ink); }
.value-card p { font-size: 12.8px; color: var(--ink-muted); margin-top: 6px; line-height: 1.55; }
@media screen { .value-card p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.value-card .go3 { display: block; margin-top: 14px; text-align: center; padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.value-card.featured { border-color: var(--orange); }
.value-card.featured .go3 { background: var(--orange); color: #fff; border-color: var(--orange); }

.mockup-area-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.mockup-area-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: .15s; }
.mockup-area-card:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mockup-area-card .n { font-family: var(--mono); font-size: 11px; color: var(--orange); }
@media screen { .mockup-area-card .n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.mockup-area-card h4 { font-size: 16.5px; color: var(--ink); }
.mockup-area-card p { font-size: 12.8px; color: var(--ink-muted); line-height: 1.5; }
@media screen { .mockup-area-card p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.mockup-area-card .cnt { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); }
@media screen { .mockup-area-card .cnt { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── HOME PUBBLICA: adeguamento al mockup "29 luglio 2026" ────────
   Nuove sezioni aggiunte il 2026-07-29 (esempio reale, sistema di
   contenuti, credibilità a 2 card) — vedi front-page.php. */

.aree-sub { font-size: 13.5px; color: var(--ink-mid); line-height: 1.6; max-width: 820px; margin: 16px 0 24px; padding: 14px 18px; background: var(--white); border-left: 3px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; }
@media screen { .aree-sub { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.value-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }

.scheda-demo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.scheda-main { padding: 30px 32px; }
.scheda-tags { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.scheda-organo { font-size: 13px; color: var(--ink-muted); margin-bottom: 18px; font-weight: 500; }
@media screen { .scheda-organo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-domanda-label { font-size: 11px; color: var(--orange); font-weight: 600; margin-bottom: 8px; }
@media screen { .scheda-domanda-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-domanda { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--blue); font-weight: 500; margin-bottom: 22px; }
.scheda-massima-label { font-size: 11px; color: var(--ink-muted); font-weight: 600; margin-bottom: 8px; }
@media screen { .scheda-massima-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fade-teaser { position: relative; max-height: 74px; overflow: hidden; margin-bottom: 6px; }
.fade-teaser p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; }
.fade-teaser::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white)); }
.lock-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--orange); font-weight: 600; margin-top: 6px; }
/* Contenuto di esempio in home, reso pubblico per intero (30/07/2026) — testo pieno, niente dissolvenza (non c'è nulla di nascosto sotto). */
.scheda-massima-testo p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; margin-bottom: 6px; }
.esempio-completo-badge { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--green); font-weight: 600; background: var(--green-lt); padding: 8px 12px; border-radius: 6px; margin: 6px 0 18px; }
.scheda-activities { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scheda-activities .lbl { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
@media screen { .scheda-activities .lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.scheda-side { background: var(--blue); color: #fff; padding: 30px 26px; display: flex; flex-direction: column; }
.side-lbl { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 600; margin-bottom: 10px; }
@media screen { .side-lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cert-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 11px 14px; margin-bottom: 22px; }
.cert-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rust-on-dark); flex-shrink: 0; }
.cert-badge span { font-size: 13px; font-weight: 600; }
@media screen { .cert-badge span { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.demo-side-list { list-style: none; margin-bottom: 20px; }
.demo-side-list li { font-size: 13px; color: rgba(255,255,255,.82); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
@media screen { .demo-side-list li { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.demo-side-list li:last-child { border-bottom: none; }
.demo-side-note { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.55; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
@media screen { .demo-side-note { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.system-strip { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--rule); }
.system-head { max-width: 660px; margin-bottom: 22px; }
.system-head h3 { font-size: 20px; margin: 8px 0 8px; }
.system-head p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }
@media screen { .system-head p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.system-nodes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.node { font-size: 12.5px; font-weight: 600; background: var(--white); border: 1px solid var(--rule); color: var(--blue); padding: 7px 15px; border-radius: 20px; }
.node-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cred-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px; }
.cred-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--serif); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 14px; overflow: hidden; }
.cred-avatar.cred-avatar-alt { background: var(--orange); }
/* Stesso trattamento a disco bianco pieno del logo in Hero (.hero-avatar-
   logo) — disco bianco indipendente dal colore di sfondo del file sorgente
   del logo, qui usato con la variante Logo-TECNOJUS-1.webp (sfondo blu). */
/* CORREZIONE 29-08-2026: qui si usa Logo-TECNOJUS-1.webp, la variante
   scura del logo (sfondo blu #3f6e9c, campionato dal file reale) — il
   cerchietto deve avere lo stesso blu di sfondo, non bianco (il bianco
   restava riservato alla Hero, che usa la variante -2 su sfondo chiaro):
   così i bordi del quadrato del logo si fondono nel cerchio invece di
   restare visibili. Stesso trattamento a piena copertura della foto di
   Romolo in Hero (object-fit:cover, tag <img>, niente più testo). */
.cred-avatar.cred-avatar-logo { background: #3f6e9c; border: 1px solid var(--rule); }
/* CORREZIONE 29-08-2026: come in Hero, contenuto (non a piena copertura) e
   più piccolo del cerchio — a piena copertura il logo veniva ingrandito
   troppo e il bordo risultava sgranato; il colore di sfondo del cerchietto
   uguale al logo (sopra) rende comunque invisibile il margine. */
.cred-avatar img.avatar-logo { width: 70%; height: 70%; object-fit: contain; display: block; }
.cred-avatar img.avatar-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; }
.cred-card h4 { font-family: var(--serif); font-size: 16.5px; color: var(--blue); margin-bottom: 4px; }
.cred-role { font-size: 12px; color: var(--orange); font-weight: 600; margin-bottom: 12px; }
@media screen { .cred-role { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cred-card p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }
@media screen { .cred-card p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cred-anniv { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--blue); background: var(--surface); padding: 4px 11px; border-radius: 20px; }
@media screen { .cred-anniv { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Home pubblica 26/09/2026: pill cliccabili (Tecnojus, pagina curriculare) */
a.cred-anniv { text-decoration: none; transition: background .15s, color .15s; }
a.cred-anniv:hover, a.cred-anniv:focus-visible { background: var(--blue); color: #fff; }
/* Home pubblica 26/09/2026: logo Accademia accanto al testo di "Chi siamo", link alla pagina completa */
.chi-intro { display: flex; align-items: center; gap: 48px; }
.chi-intro .pres-lede { flex: 1 1 auto; }
.chi-intro-logo { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.chi-intro-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); transition: color .15s; }
.chi-intro-logo-img { display: block; width: 220px; height: auto; transition: opacity .15s; }
.chi-intro-logo:hover .chi-intro-lbl, .chi-intro-logo:focus-visible .chi-intro-lbl { color: var(--orange); }
.chi-intro-logo:hover .chi-intro-logo-img { opacity: .85; }
@media (max-width: 900px) {
  .chi-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .chi-intro-logo { flex-basis: auto; align-items: flex-start; }
  .chi-intro-logo-img { width: 180px; }
}

/* ── HOME PUBBLICA v3 (ramo non loggato) — Brief_ClaudeCode_Home_pubblica
   _29-08-2026, fedele a home-accademia-v3.html. Usate solo da front-page.php
   (ramo pubblico): nomi scelti per non collidere con classi condivise già
   in uso altrove nel tema (es. .art-row/.norma-side/.side-lbl sono già di
   single-normativa.php, con markup diverso — qui prefisso "exdemo-"). */

.hero-credenziali.no-border { border-top: 0; padding-top: 0; }
/* CORREZIONE 29-08-2026: disco bianco pieno dietro al logo, non trasparente
   né dello stesso blu della Hero/della card — indipendente dal colore di
   sfondo del file sorgente del logo (uno bianco, uno blu). */
.hero-avatar.hero-avatar-logo { background: #fff; border: 1px solid var(--rule); }
/* Zoom al passaggio del mouse, solo sui due loghi Centro Studi Tecnojus
   (Hero + Chi siamo) — non sulle foto. Il cerchio (overflow:hidden) fa da
   maschera, l'immagine internamente si ingrandisce oltre il 70% di base. */
.hero-avatar-logo, .cred-avatar-logo { cursor: pointer; }
.hero-avatar-logo img.avatar-logo, .cred-avatar-logo img.avatar-logo { transition: transform .2s ease; }
.hero-avatar-logo:hover img.avatar-logo, .cred-avatar-logo:hover img.avatar-logo { transform: scale(1.4); }
.method-card p.body { font-size: 12.6px; color: var(--text-on-dark-muted); line-height: 1.6; margin: 10px 0 14px; }
@media screen { .method-card p.body { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.method-card .scale-lbl { font-size: 11px; font-style: italic; color: var(--text-on-dark-muted); margin-bottom: 8px; opacity: .8; }
@media screen { .method-card .scale-lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.pres-block { padding: 44px 24px; border-bottom: 1px solid var(--rule); }
.pres-block.on-surface { background: var(--surface); }
.pres-head { max-width: 660px; margin-bottom: 18px; }
.pres-eyebrow { font-size: 11.5px; font-weight: 700; color: var(--orange); margin-bottom: 8px; display: block; }
@media screen { .pres-eyebrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pres-head h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--blue); }
.pres-lede { font-size: 14.5px; color: var(--ink-muted); line-height: 1.7; max-width: 780px; }
.pres-note { font-size: 13px; color: var(--ink-muted); margin-top: 20px; }
@media screen { .pres-note { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.hub-diagram { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 24px; }
.hub-center { background: var(--blue); color: #fff; border-radius: var(--radius); padding: 14px 18px; flex-shrink: 0; min-width: 148px; }
.hub-center-lbl { font-size: 10px; color: rgba(255,255,255,.55); margin-bottom: 4px; }
@media screen { .hub-center-lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hub-center-name { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.hub-connector { font-size: 12px; color: var(--ink-muted); font-style: italic; flex-shrink: 0; white-space: nowrap; }
@media screen { .hub-connector { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hub-satellites { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.hub-badge { font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 13px; }
@media(max-width: 700px) { .hub-diagram { flex-direction: column; align-items: flex-start; } }

.come-flow { display: flex; align-items: stretch; gap: 0; margin-top: 6px; flex-wrap: wrap; }
.come-step { flex: 1; min-width: 160px; padding: 16px 26px 16px 0; position: relative; }
.come-step:not(:last-child)::after { content: "→"; position: absolute; right: 8px; top: 18px; color: var(--orange); font-size: 16px; }
.come-step .n { font-family: var(--serif); font-size: 12px; color: var(--orange); font-weight: 600; margin-bottom: 6px; }
@media screen { .come-step .n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.come-step h5 { font-family: var(--serif); font-size: 14.5px; color: var(--blue); font-weight: 600; margin-bottom: 6px; }
.come-step p { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; }
@media screen { .come-step p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media(max-width: 1000px) { .come-flow { flex-direction: column; } .come-step { padding: 0 0 22px 0; } .come-step:not(:last-child)::after { content: "↓"; right: auto; left: 0; top: auto; bottom: 4px; } }

.perche-content { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 4px; }
.perche-content p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.75; }
.perche-content p strong { color: var(--blue); }
.perche-content > div > p + p { margin-top: 14px; } /* due capoversi nella seconda colonna (frase sull'autonomia di giudizio, Romolo 07/11/2026) */
@media(max-width: 900px) { .perche-content { grid-template-columns: 1fr; } }

.exdemo-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-top: 22px; }
.exdemo-main { padding: 30px 32px; }
.exdemo-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--orange); margin-bottom: 8px; }
@media screen { .exdemo-eyebrow { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.exdemo-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--blue); margin-bottom: 18px; line-height: 1.35; }
.exdemo-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; padding-bottom: 10px; flex-wrap: wrap; }
.exdemo-tab { font-size: 12.5px; color: var(--ink-muted); font-weight: 500; }
.exdemo-tab b { font-weight: 600; color: var(--ink-muted); margin-left: 3px; }
.exdemo-tab.active { color: var(--blue); font-weight: 600; border-bottom: 2px solid var(--orange); padding-bottom: 10px; margin-bottom: -11px; }
.exdemo-artrow { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.exdemo-artrow:last-child { border-bottom: none; }
.exdemo-artnum { font-family: var(--serif); font-weight: 600; color: var(--blue); font-size: 13.5px; width: 76px; flex-shrink: 0; padding-top: 1px; }
@media screen { .exdemo-artnum { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.exdemo-arttitle { font-size: 13.5px; color: var(--ink); margin-bottom: 7px; font-weight: 500; }
@media screen { .exdemo-arttitle { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.exdemo-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.exdemo-badge { font-size: 11px; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 3px 8px; }
@media screen { .exdemo-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.exdemo-badge-hi { color: var(--orange); border-color: var(--orange); background: var(--orange-lt); }
.exdemo-side { background: var(--blue); color: #fff; padding: 28px 26px; }
.exdemo-side .lbl { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 600; margin-bottom: 10px; }
@media screen { .exdemo-side .lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.exdemo-side .lst { list-style: none; margin-bottom: 18px; }
.exdemo-side .lst li { font-size: 12.5px; color: rgba(255,255,255,.85); padding: 4px 0; line-height: 1.5; }
@media screen { .exdemo-side .lst li { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.exdemo-side .lst strong { color: #fff; }
.exdemo-side .note { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.55; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
@media screen { .exdemo-side .note { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media(max-width: 900px) { .exdemo-wrap { grid-template-columns: 1fr; } .exdemo-artrow { flex-direction: column; gap: 5px; } }

.page-section.sec-tight { padding: 44px 24px; }
.page-section.sec-48 { padding: 48px 24px; }
.piani-head-simple { text-align: center; max-width: 560px; margin: 0 auto 24px; }
.piani-grid-2 { grid-template-columns: repeat(2,1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.piano.piano-minimal { display: flex; flex-direction: column; }
.piano.piano-minimal .piano-foot { margin-top: auto; }
/* 26/09/2026: l'intestazione riempie lo spazio fino al pulsante, niente fascia vuota tra due linee quando i titoli hanno altezze diverse. */
.piano.piano-minimal .piano-head { flex: 1 1 auto; }
@media(max-width: 700px) { .piani-grid-2 { grid-template-columns: 1fr; } }

.search-hero { background: var(--blue); color: #fff; }
.search-hero .at-container { padding: 36px 24px 30px; }
.search-hero h1 { color: #fff; font-size: 22px; }
.search-hero .sub { color: rgba(255,255,255,.7); font-size: 13px; }
@media screen { .search-hero .sub { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Etichetta ed esempio sulla stessa riga (Addendum4_Brief_Home_abbonato_
   bugPillola_layoutHero_16-08-2026, punto 2a). Solo il box di ricerca
   sotto (.big-search, base rule più giù) resta a 640px — le pillole NON
   condividono più quella colonna, sono dirette figlie di .at-container a
   piena larghezza (punto 2b: "sono due elementi che devono avere
   larghezze indipendenti, non la stessa colonna" — la .search-hero-col di
   Addendum2 raggruppava tutto insieme, sbagliato, rimossa). */
.search-hero .sub-riga { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.big-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--radius-lg); padding: 7px 7px 7px 18px; margin-top: 20px; box-shadow: var(--shadow-md); }
.big-search input { border: 0; outline: 0; flex: 1; font-size: 15px; font-family: var(--sans); padding: 12px 0; }
.big-search button { background: var(--orange); color: #fff; border: 0; border-radius: var(--radius); padding: 12px 22px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
@media screen { .big-search button { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Alleggerite (Addendum_Brief_Home_abbonato_gerarchia_menu-pillole_16-08-2026):
   le pillole non selezionate sono testo semplice, senza bordo/riquadro —
   il trattamento pieno/colorato resta riservato SOLO alla pillola
   selezionata (stato attivo, non decorazione su tutte e 10 indistintamente),
   così il menu della navbar vince il confronto visivo con questa riga. */
/* Non vanno mai a capo (Addendum4_Brief_Home_abbonato_bugPillola_layoutHero
   _16-08-2026, punto 2b): piena larghezza della Hero, indipendente dal box
   di ricerca ristretto sopra. overflow-x:auto solo come rete di sicurezza
   su viewport desktop molto stretti — mai wrapping su più righe. */
.type-pills { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: nowrap; overflow-x: auto; }
.type-pills a { padding: 4px 0; border-radius: 20px; border: 1px solid transparent; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.6); text-decoration: none; }
.type-pills a.on { padding: 7px 14px; background: var(--orange); color: #fff; border-color: var(--orange); }
.type-pills a:hover { color: #fff; }

/* position:relative è l'ancora dello stretched link sotto (.feed-row .ttl
   ::after) — l'intero blocco diventa cliccabile pur restando un solo <a>
   reale (REGIA UI-liste_secondo-colore-eyebrow_31-08-2026, punto 3). */
.feed-row { position: relative; display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--rule); align-items: flex-start; background: var(--white); cursor: pointer; transition: background .15s; }
.feed-row:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.feed-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* Hover leggero e coerente: solo tint di sfondo tenuissimo, niente ombre né
   riempimento pieno colorato (REGIA, punto 4). */
.feed-row:hover { background: var(--surface); }
/* Riga metadati unica (tipo di contenuto · segmenti extra · data), testo
   semplice — mai un badge/riquadro per il tipo (Brief_ClaudeCode_Home_
   abbonato_15-08-2026, punto 7). Ordine e colori riscritti dalla REGIA
   UI-liste_secondo-colore-eyebrow_31-08-2026, punto 1: tipo (icona
   monocroma + testo blu, sempre primo) · segmenti extra come area tematica
   o riferimento normativo (grigio secondario) · data (grigio muted, sempre
   per ultima — prima era il primo elemento ed era l'unico colorato). */
.feed-meta-riga { font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; margin-bottom: 3px; }
@media screen { .feed-meta-riga { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-meta-riga .feed-sep { margin: 0 5px; opacity: .5; font-weight: 400; }
.feed-meta-riga .feed-tipo { display: inline-flex; align-items: center; gap: 4px; color: var(--text-category); }
.feed-meta-riga .feed-tipo-ic { display: inline-flex; color: var(--ink-muted); }
.feed-meta-riga .feed-tipo-ic .svgic { width: 12px; height: 12px; }
.feed-meta-riga .feed-tag { color: var(--ink-mid); font-weight: 500; }
.feed-meta-riga .feed-data { color: var(--ink-muted); font-weight: 500; }
.feed-row { text-decoration: none; color: inherit; }
.feed-row .ttl { display: block; font-size: 13.6px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; }
@media screen { .feed-row .ttl { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.feed-row:hover .ttl { color: var(--orange); }
/* Stretched link: un solo <a> reale (.ttl), espanso via ::after a coprire
   l'intero .feed-row (position:relative sopra ne è il contenitore). Il tag
   articolo/norma nella riga eyebrow resta testo semplice, non cliccabile
   (REGIA, punto 3 — decisione esplicita, copertura dati collegamento
   articolo-specifico ancora incompleta). */
.feed-row .ttl::after { content: ""; position: absolute; inset: 0; }

/* .evid-item è un <a> quando c'è una voce reale (card intera cliccabile,
   fix Addendum_Decisione_CPT_Radar_primoTest_16-08-2026 punto 4), un <div>
   nello stato vuoto — display/decorazione validi per entrambi i tag. */
.evid-item { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; }
.evid-item:first-child { border-top: 0; }
.evid-item .ic { flex-shrink: 0; padding-top: 1px; color: var(--orange); }
.evid-item .k { font-size: 10.3px; color: var(--ink-muted); font-weight: 600; }
@media screen { .evid-item .k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.evid-item .ttl { display: block; font-size: 12.6px; font-weight: 600; margin-top: 2px; line-height: 1.4; color: var(--ink); text-decoration: none; }
@media screen { .evid-item .ttl { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.evid-item:hover .ttl { color: var(--orange); }
.evid-item .meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .evid-item .meta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

@media(max-width: 900px) {
  .value-grid, .mockup-area-grid, .value-grid-4 { grid-template-columns: repeat(2,1fr); }
  .scheda-demo, .cred-grid { grid-template-columns: 1fr; }
  .page-stick .anchors { overflow-x: auto; }
}
@media(max-width: 600px) {
  .value-grid, .mockup-area-grid, .value-grid-4 { grid-template-columns: 1fr; }
}

/* ── HEADER CONDIVISO (topbar + navbar): fedele a index.html/home-abbonato.html ──
   Aggiunto il 2026-07-27. Tutte le classi qui sotto sono usate SOLO da
   header.php (verificato: nessuna condivisione con altri template), quindi
   sostituiscono (non affiancano) le vecchie regole con prefisso topbar-,
   navbar-, logo, nav-aree, nav-area, nav-attivita, nav-actions, btn-search,
   accademia-login-area, rimosse in coda a questo blocco.
   ATTENZIONE: mai scrivere la sequenza di caratteri asterisco-slash dentro
   un commento CSS (nemmeno come testo libero) - chiude il commento a meta'
   e invalida silenziosamente la regola successiva (successo qui il 27/07). */

/* Striscia .topbar (abbonamento/assistenza) fusa in .navbar-top il
   2026-08-28 (Brief_ClaudeCode_Fusione_topbar_navbar): non è più una
   fascia scura a sé, il suo contenuto vive ora in .topbar-info su sfondo
   bianco, sulla stessa riga di logo/ricerca/notifiche/account —
   compattato a un'unica riga di testo piccolo, invece delle due righe
   larghezza piena di prima. */
.navbar { background: var(--white); position: sticky; top: 0; z-index: 40; }
.navbar-top { display: flex; align-items: center; gap: 20px; min-height: 62px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.topbar-info { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 11.5px; color: var(--ink-muted); min-width: 0; }
@media screen { .topbar-info { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.topbar-info a { color: var(--ink-muted); text-decoration: none; }
.topbar-info a:hover { color: var(--orange); text-decoration: underline; }
.topbar-info .sep { opacity: .5; margin: 0 8px; }
.topbar-info .topbar-pubblicazioni { display: inline-flex; align-items: center; gap: 4px; }
.topbar-info .topbar-pubblicazioni .svgic { width: 13px; height: 13px; }
.topbar-info .topbar-pubblicazioni.active { color: var(--orange); font-weight: 600; }
.topbar-progetto-sep { display: inline-block; width: 1px; height: 24px; background: var(--rule); margin: 0 12px; vertical-align: middle; }

/* Riga "Aree tematiche" separata dal blocco logo/accesso sopra (Brief_
   ClaudeCode_Fix_Home_postlogin_28-08-2026, punto 1): eyebrow/kicker +
   riga di navigazione diretta, non un menu. Il bordo di separazione dal
   logo è ora su .navbar-top (sopra), non qui: un bordo inferiore su
   .navbar-areas non si vedeva quasi mai, coperto dalla Hero scura che
   segue su quasi tutte le pagine (segnalato da Romolo il 28-08-2026). */
.navbar-areas { margin-top: 6px; }
/* padding-top/bottom separati (non lo shorthand "padding") apposta: lo
   shorthand azzererebbe anche il padding orizzontale ereditato da
   .at-container (0 24px), disallineando questa barra a sinistra rispetto
   a navbar-top/hero/stick-menu sotto — bug segnalato da Romolo 08/09/2026
   (Brief allineamento navbar/sticky menu), confermato via CDP: il testo
   "Aree tematiche" partiva 24px più a sinistra del logo sopra. */
.navbar-areas-inner { display: flex; align-items: center; gap: 22px; padding-top: 9px; padding-bottom: 9px; }
.navbar-areas-label { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--ink-muted); }
@media screen { .navbar-areas-label { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; }
/* Logo reale (attachment 5650 dal 05/10/2026, prima 4552 accademia.png)
   al posto del blocco CSS con la sola lettera "A" — Brief_ClaudeCode_
   Fusione_topbar_navbar_28-08-2026, punto 2. */
.brand .mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.brand .word { display: flex; flex-direction: column; line-height: 1.05; }
.brand .word b { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: .2px; color: var(--ink); }
.brand .word span { font-size: 10px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .brand .word span { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Logo completo in testata (media 5649 dal 05/10/2026, prima 5524): 410×120 px, a
   schermo 40px di altezza (32px sotto i 600px). */
.brand .brand-logo { display: block; height: 40px; width: auto; }
@media (max-width: 600px) { .brand .brand-logo { height: 32px; } }

/* Voci di menu separate da un filo verticale sottile, non da riquadri a
   pulsante (Brief_ClaudeCode_Home_abbonato_15-08-2026, punto 3 — scartato
   il trattamento a bottone). Le voci possono andare su due righe
   (white-space normal, non nowrap) senza rompere l'allineamento
   orizzontale della riga: .navbar-areas-inner non ha height fissa, per
   non tagliarle.
   Ristilizzata il 2026-08-28 (Brief_ClaudeCode_Fix_Home_postlogin, punto
   1) per leggere come navigazione, non come menu principale: peso
   regular invece di bold, stato attivo segnalato da sottolineatura +
   semibold (non da un riempimento pieno), niente dropdown/chevron (i
   link restano diretti). */
.main-nav { display: flex; align-items: center; gap: 0; }
.main-nav a { padding: 8px 20px; font-size: 14.5px; font-weight: 400; color: var(--ink); border-left: 1px solid var(--rule); white-space: normal; line-height: 1.25; text-decoration: none; border-bottom: 2px solid transparent; }
.main-nav a:first-child { border-left: 0; padding-left: 0; }
.main-nav a:hover { color: var(--orange); }
.main-nav a.active { color: var(--orange); font-weight: 600; border-bottom-color: var(--orange); }
/* Voce autonoma "Orientamenti" (25/09/2026): stessa altezza e tipografia
   delle voci di area (la navbar resta a 123px), distinta da colore, icona,
   separatore e allineamento a destra. */
.nav-orientamenti { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 8px 18px; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--blue); border-left: 1px solid var(--rule); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.nav-orientamenti svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-orientamenti:hover { color: var(--orange); }
.nav-orientamenti.active { color: var(--orange); border-bottom-color: var(--orange); }
/* Gruppo di destra Percorsi + Orientamenti (BRIEF percorsi Fase 2, punto D,
   01/10/2026): doppia barra verticale prima del gruppo, filetto singolo tra
   Percorsi e Orientamenti. "Percorsi" ha la stessa tipografia di
   "Orientamenti". Dal 01/10/2026 (indice v2) la voce porta sempre a /percorsi/.
   Le intestazioni .nav-voci-tit esistono solo nel menu sotto i 900px. */
.nav-voci-tit { display: none; }
.nav-destra { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; padding-left: 18px; border-left: 3px double var(--rule); }
.nav-destra .nav-orientamenti { margin-left: 0; padding-left: 0; border-left: 0; }
.nav-destra .nav-percorsi ~ .nav-orientamenti { padding-left: 18px; border-left: 1px solid var(--rule); }
.nav-percorsi { position: relative; display: flex; align-items: center; }
.nav-percorsi-voce { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px 8px 0; margin: 0; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--blue); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; text-decoration: none; white-space: nowrap; cursor: pointer; }
.nav-percorsi-voce:hover, .nav-percorsi-voce:focus, .nav-percorsi-voce:active { background: none; color: var(--orange); }
.nav-percorsi-voce:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.nav-percorsi-voce.active { color: var(--orange); border-bottom-color: var(--orange); }
.nav-percorsi-elenco { display: none; list-style: none; margin: 0; padding: 0; }
.nav-percorsi-elenco a { display: block; padding: 9px 16px; font-size: 14px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.nav-percorsi-elenco a:hover { color: var(--orange); }
.nav-percorsi-elenco a.active { color: var(--orange); font-weight: 600; }

.nav-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--white); display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.icon-btn:hover { border-color: var(--ink); }

.btn-ghost { display: inline-flex; align-items: center; gap: 7px; justify-content: center; padding: 9px 18px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; border: 1px solid #C7CABF; color: var(--ink); background: transparent; white-space: nowrap; text-decoration: none; }
@media screen { .btn-ghost { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.btn-ghost:hover { border-color: var(--ink); }

/* Testo semplice a due righe, niente avatar a iniziali (Brief_ClaudeCode
   _Home_abbonato_15-08-2026, punto 2): nessun caricamento immagine/avatar
   previsto, né ora né in futuro. */
.user-chip { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; line-height: 1.3; }
.user-chip-nome { font-size: 13px; font-weight: 500; color: var(--ink); }
@media screen { .user-chip-nome { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.user-chip-titolo { font-size: 11px; color: var(--ink-muted); }
@media screen { .user-chip-titolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Contenitore delle voci (aree + Orientamenti): sopra i 900px non esiste ai
   fini dell'impaginazione (display: contents), la riga resta identica a prima.
   Il tasto a tendina esiste solo sotto i 900px. */
.navbar-areas-voci { display: contents; }
.navbar-areas-toggle { display: none; }
/* Sotto i 900px (telefoni e tablet in verticale) la riga "Aree tematiche"
   prima spariva del tutto e lì non c'era alcun modo di raggiungere le aree
   (segnalato da Romolo 28/09/2026 su test.accademia.tv). Ora è una barra a
   una riga con l'area corrente e un tasto che apre la tendina con l'elenco
   verticale — stesso schema barra + tendina di .ctx-menu, niente scorrimento
   orizzontale. Apri/chiudi in assets/js/navbar-aree.js. */
@media(max-width: 900px) {
  .navbar-areas { position: relative; margin-top: 0; border-bottom: 1px solid var(--rule); }
  .navbar-areas-inner { padding-top: 0; padding-bottom: 0; gap: 0; }
  .navbar-areas-label { display: none; }
  .navbar-areas-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
  /* GeneratePress dà a button:hover/:focus/:active uno sfondo scuro: qui no. */
  .navbar-areas-toggle:hover, .navbar-areas-toggle:focus, .navbar-areas-toggle:active { background: none; color: var(--ink); }
  .navbar-areas-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
  .navbar-areas-toggle-k { flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--ink-muted); }
@media screen { .navbar-areas-toggle-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
  .navbar-areas-toggle-v { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .navbar-areas-toggle-chev { flex-shrink: 0; font-size: 15px; color: var(--ink-muted); transition: transform .15s; }
  .navbar-areas-toggle[aria-expanded="true"] .navbar-areas-toggle-chev { transform: rotate(180deg); }
  .navbar-areas-voci { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 41; background: var(--white); border-top: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: calc(100vh - var(--navbar-h, 170px)); overflow-y: auto; }
  .navbar-areas.is-open .navbar-areas-voci { display: block; }
  .navbar-areas-voci .main-nav { display: block; }
  .navbar-areas-voci .main-nav a,
  .navbar-areas-voci .main-nav a:first-child,
  .navbar-areas-voci .nav-orientamenti { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 24px; margin: 0; border-left: 0; border-bottom: 1px solid var(--rule); font-size: 15px; white-space: normal; }
  .navbar-areas-voci .main-nav a.active,
  .navbar-areas-voci .nav-orientamenti.active { border-bottom-color: var(--rule); box-shadow: inset 3px 0 0 var(--orange); }
  .navbar-areas-voci .nav-orientamenti { border-bottom: 0; }
  /* Info di servizio (ex-.topbar) tolte sotto i 900px insieme alla riga
     Aree tematiche — stesso principio di decluttering, Brief_ClaudeCode_
     Fusione_topbar_navbar_28-08-2026: sui viewport stretti c'è spazio solo
     per logo + strumenti essenziali. */
  .topbar-info { display: none; }
}
/* Sotto i 900px (BRIEF percorsi Fase 2, punto D): nel menu a scomparsa tre
   intestazioni (Tematiche, Percorsi, Orientamenti); sotto Percorsi i primi 4
   per nome e «Tutti i percorsi →» (indice v2), senza la voce "Percorsi". */
@media(max-width: 900px) {
  .navbar-areas-voci .nav-voci-tit { display: block; padding: 14px 24px 6px; font-size: 10.5px; font-weight: 600; color: var(--ink-muted); }
@media screen { .navbar-areas-voci .nav-voci-tit { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
  .navbar-areas-voci .nav-destra { display: block; margin: 0; padding: 0; border-left: 0; }
  .navbar-areas-voci .nav-destra .nav-orientamenti { padding-left: 24px; border-left: 0; }
  .navbar-areas-voci .nav-percorsi { display: block; }
  .navbar-areas-voci .nav-percorsi-voce { display: none; }
  .navbar-areas-voci .nav-percorsi-elenco { display: block; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; }
  .navbar-areas-voci .nav-percorsi-elenco a { display: flex; align-items: center; min-height: 46px; padding: 11px 24px; border-bottom: 1px solid var(--rule); font-size: 15px; }
  .navbar-areas-voci .nav-percorsi-elenco a.active { box-shadow: inset 3px 0 0 var(--orange); }
  .navbar-areas-voci .nav-percorsi-elenco a.nav-percorsi-tutti { font-weight: 600; color: var(--orange); }
}
/* Addendum 14, punto 3 (menu delle aree su una riga): tra 971 e 1100 px le cinque voci ("Professione e ordinamento", ...)
   non vanno più a capo (nowrap) e hanno meno spazio orizzontale (12px invece di 20px): la navbar torna a 123px come da
   1050 px in su. Provati in ordine: nowrap (non basta, 868 px di voci contro 850 disponibili a 1024), poi il padding
   (basta: 796 px); l'etichetta "Aree tematiche" resta. Sotto i 971 px il menu resta com'era (voci su due righe). */
/* 25/09/2026, voce "Orientamenti" aggiunta alla riga (misurato: aree 789px
   + etichetta 104 + Orientamenti 123 + spazi 44 = 1060px): la regola sopra
   si estende fino a 1250px (prima 1100, oltre le voci a 20px andavano a
   capo a 1180); tra 971 e 1107px non c'è spazio nemmeno così e si tolgono
   l'etichetta "Aree tematiche" e l'icona della voce (906px, ci sta anche a 971). */
/* 01/10/2026, voce "Percorsi" e doppia barra (BRIEF percorsi Fase 2, punto D).
   Misurato: testo delle 5 aree 688px, etichetta "Tematiche:" 74, gruppo di
   destra 224 (202 senza icona), spazio utile max 1152. Per restare su una riga
   (123px) da 971px in su: voci nowrap a 12px a TUTTE le larghezze ≥971
   (prima solo fino a 1250, oltre andavano a capo); etichetta nascosta sotto
   1190px, icona di Orientamenti sotto 1094px; tra 971 e 1071px voci a 10px e
   "Professione" (nome_breve) al posto di "Professione e ordinamento".
   Tra 901 e 970px resta il comportamento di prima (voci su più righe). */
.nav-nome-corto { display: none; }
@media (min-width: 971px) {
  .main-nav a { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  .main-nav a:first-child { padding-left: 0; }
}
@media (min-width: 901px) and (max-width: 1189px) {
  .navbar-areas-label { display: none; }
}
@media (min-width: 901px) and (max-width: 1093px) {
  .nav-orientamenti svg { display: none; }
}
@media (min-width: 971px) and (max-width: 1071px) {
  .main-nav a { padding-left: 10px; padding-right: 10px; }
  .main-nav a:first-child { padding-left: 0; }
  .main-nav .nav-nome-lungo { display: none; }
  .main-nav .nav-nome-corto { display: inline; }
}
/* Sotto i 900px l'intera riga "Aree tematiche" sparisce e resta solo la
   riga logo/accesso: senza questa regola, sui viewport stretti la somma
   dei pulsanti di .nav-tools (ricerca, notifiche, chip utente ora su due
   righe, "Esci") può superare la larghezza dello schermo e spingere
   "Esci" fuori dalla pagina invece di andare a capo (bug segnalato più
   volte da Romolo, Brief_ClaudeCode_Home_abbonato_15-08-2026 punto 1). */
@media(max-width: 640px) {
  .navbar-top { flex-wrap: wrap; row-gap: 8px; }
  .nav-tools { flex-wrap: wrap; justify-content: flex-end; width: 100%; }
}
/* ── HUB AREA TEMATICA (Edilizia + Professione): fedele a hub-edilizia.html /
   hub-professione(-generalista).html — aggiunto 2026-07-27. Usate solo da
   taxonomy-area_tematica.php e taxonomy-area_tematica-professione.php.
   .hero-blu/.sticky-bar restano invariate (usate anche da
   taxonomy-attivita_professionale.php, non toccata oggi). */

.area-hero { background: var(--blue); padding: 22px 0 26px; }
.area-hero .breadcrumb { background: transparent; border-bottom: 0; padding: 0 0 8px; }
.area-hero .breadcrumb a, .area-hero .bc-sep { color: rgba(255,255,255,.55); }
.area-hero .bc-current { color: #fff; }
.area-hero h1 { font-family: var(--serif); color: #fff; font-size: 26px; margin: 6px 0 0; font-weight: 600; }
.area-hero p { color: rgba(255,255,255,.65); font-size: 13px; max-width: 560px; margin-top: 6px; }
@media screen { .area-hero p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Pagina del percorso (taxonomy-percorso.php, BRIEF percorsi Fase 2, punto E). */
.percorso-kicker { margin-top: 4px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.65); }
@media screen { .percorso-kicker { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.area-hero .percorso-kicker + h1 { margin-top: 2px; }
.percorso-body { margin-bottom: 64px; }
.percorso-colonna { max-width: 860px; }
.percorso-sezione { margin-bottom: 28px; }
.percorso-conteggio { font-size: 12px; color: var(--ink-muted); }
@media screen { .percorso-conteggio { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.percorso-ingresso { border: 1px solid var(--rule); border-radius: var(--radius-lg); }
/* Prestazioni profilate (BRIEF percorsi Fase 5, punto E). Etichette compatte
   nelle card dei percorsi: attiva = piena (accento, con codice), in arrivo =
   attenuata; vanno a capo, mai oltre il bordo. */
.prest-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.prest-tag { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 10px; font-size: 11px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
@media screen { .prest-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.prest-tag.is-attiva { background: var(--orange); color: #fff; }
.prest-tag.is-attiva b { font-weight: 700; margin-right: 2px; }
.prest-tag.is-arrivo { background: transparent; border: 1px solid var(--rule); color: var(--ink-muted); }
.prest-tag.is-arrivo i { font-style: normal; opacity: .75; }
.prest-tag-altre { align-self: center; font-size: 11px; color: var(--ink-muted); }
@media screen { .prest-tag-altre { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-percorsi .prest-tags { margin-top: 6px; }
/* Sezione «Prestazioni di questo percorso»: griglia di piccole card per famiglia. */
.prest-gruppo + .prest-gruppo { margin-top: 18px; }
.at .prest-gruppo-tit { margin: 0 0 10px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--ink-muted); }
@media screen { .at .prest-gruppo-tit { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.prest-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .prest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prest-grid { grid-template-columns: repeat(3, 1fr); } }
.prest-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); text-decoration: none; color: inherit; }
.prest-card.is-arrivo { background: transparent; border-style: dashed; }
.prest-card.is-link { transition: border-color .15s; }
.prest-card.is-link:hover { border-color: var(--orange); }
.prest-card-cod { font-size: 11px; font-weight: 700; color: var(--orange); }
@media screen { .prest-card-cod { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.prest-card.is-arrivo .prest-card-cod { color: var(--ink-muted); }
.prest-card-nome { font-family: var(--serif); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--blue); overflow-wrap: anywhere; }
.prest-card.is-arrivo .prest-card-nome { color: var(--ink-muted); }
.prest-card-stato { margin-top: auto; padding-top: 4px; font-size: 11px; font-weight: 600; color: var(--blue); }
@media screen { .prest-card-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.prest-card.is-arrivo .prest-card-stato { color: var(--ink-muted); font-weight: 500; }
/* Pagina della prestazione. */
.prest-h1-cod { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 6px; background: var(--orange); color: #fff; font-family: var(--sans); font-size: 15px; vertical-align: 4px; }
.prest-avviso-bozza { margin: 0 0 18px; padding: 12px 16px; border: 1px dashed var(--orange); border-radius: var(--radius-lg); background: #FFF6EE; font-size: 13.5px; color: var(--ink); }
@media screen { .prest-avviso-bozza { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.prest-scheda-testo { padding: 18px 22px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.prest-scheda-nota { margin: 10px 2px 0; font-size: 12px; font-style: italic; color: var(--ink-muted); }
@media screen { .prest-scheda-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Mappa a sezioni del percorso (BRIEF percorsi indice v2, punto F). */
.at .percorso-mappa-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.percorso-mappa-sez { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 20px; }
.percorso-mappa-sez.is-vuota { border-style: dashed; background: transparent; }
.percorso-mappa-head { display: flex; align-items: baseline; gap: 12px; }
.percorso-mappa-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; line-height: 26px; text-align: center; }
@media screen { .percorso-mappa-n { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.percorso-mappa-tit { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blue); line-height: 1.35; }
.percorso-mappa-testo { margin: 8px 0 0 38px; font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }
@media screen { .percorso-mappa-testo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.at .percorso-mappa-voci { list-style: none; margin: 10px 0 0 38px; padding: 0; }
.percorso-mappa-voci li + li { border-top: 1px solid var(--rule); }
.percorso-mappa-voci a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; text-decoration: none; color: var(--ink); }
.percorso-mappa-voci a:hover .percorso-mappa-voce { color: var(--orange); }
.percorso-mappa-tipo { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--blue); }
@media screen { .percorso-mappa-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.percorso-mappa-voce { font-size: 14px; font-weight: 600; line-height: 1.4; }
.percorso-mappa-nota { margin: 8px 0 0 38px; font-size: 12px; font-style: italic; color: var(--ink-muted); }
@media screen { .percorso-mappa-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 600px) { .percorso-mappa-testo, .at .percorso-mappa-voci, .percorso-mappa-nota { margin-left: 0; } }
.percorso-vuoto { padding: 18px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--ink-muted); font-size: 14px; }

.hero-grid2 { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: start; margin-top: 20px; }

.count-panel { background: rgba(16,26,51,.8); border: 1px solid var(--border-on-dark); border-radius: var(--radius); padding: 16px; }
.count-panel .k { font-size: 10.5px; color: rgba(255,255,255,.6); margin-bottom: 10px; }
@media screen { .count-panel .k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.count-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-on-dark-2); text-decoration: none; }
.count-row:first-of-type { border-top: 0; }
.count-row .lab { flex: 1; font-size: 12.5px; color: var(--text-on-dark-muted); }
.count-row .num { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #fff; }
.count-row:hover .lab, .count-row:hover .num { color: var(--orange); }

/* Barra sticky UNICA dell'hub area tematica (Specifica_pagina_area_
   tematica_16-08-2026_v6_DEFINITIVA.md, punto 3 — sostituisce due barre
   sovrapposte di v2/v5: la sotto-nav contatori introdotta in v2 e questo
   stesso .stick-menu, ora fuse in una sola). Etichetta "Accedi ai singoli
   contenuti" dentro la barra, sempre visibile insieme ai tab. Conteggio
   tra parentesi in ogni tab; tipologie a zero: .stick-menu-off, presente
   ma non cliccabile. */
.stick-menu { background: var(--white); border-bottom: 1px solid var(--rule); position: sticky; top: var(--navbar-h, 123px); z-index: 30; }
/* .stick-menu-inner NON porta più la classe .at-container su di sé (era
   "at-container stick-menu-inner" sullo stesso div, ora è un div interno
   dentro un .at-container "muto", solo di allineamento) — su un
   contenitore con overflow-x:auto il padding-right ereditato da
   .at-container non viene rispettato dal browser a scrollLeft=0 quando il
   contenuto eccede la larghezza visibile (resta "oltre" l'ultimo tab,
   raggiungibile solo scrollando): con molti tab/conteggi a 3 cifre (es.
   area Edilizia e urbanistica) l'ultimo tab arrivava fino al bordo esterno
   del contenitore invece di fermarsi al bordo interno condiviso con
   navbar-top/hero, sporgendo a destra — anche spostando lo spazio da
   padding a margin sull'ultimo figlio (stesso problema, il browser tratta
   allo stesso modo lo spazio scrollabile finale). Bug segnalato da Romolo
   08/09/2026, confermato via CDP (scrollWidth 1224 vs clientWidth 1200).
   Ora l'inset di 24px sinistra/destra lo garantisce il .at-container
   esterno, che non scrolla mai e quindi lo rispetta sempre su entrambi i
   lati; lo scroll orizzontale resta tutto interno a .stick-menu-inner. */
/* Addendum 13, punto 1 (21/09/2026): NIENTE SCORRIMENTO ORIZZONTALE a nessuna
   larghezza. Le voci vanno a capo (flex-wrap) su una seconda riga se non
   stanno su una; etichetta "Contenuti" tolta dal markup; spazi ridotti
   (gap 0, padding sulle voci) e separatore verticale sottile (1 px,
   --rule: il token --border citato nell'Addendum non esiste nel tema, --rule
   è lo stesso colore già usato dal bordo inferiore della barra) disegnato
   sul lato SINISTRO di ogni voce con left:-1px. overflow:clip (non crea un
   contenitore scorrevole) taglia il separatore della prima voce di ogni riga,
   che cade fuori dal bordo sinistro: così non c'è separatore prima della
   prima voce né dopo l'ultima, e ogni riga ha solo i propri separatori.
   Nessun padding a sinistra su .stick-menu-inner: l'inset lo dà il
   .at-container esterno. */
.stick-menu-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0; overflow: clip; }
.stick-menu a { display: flex; align-items: center; gap: 6px; padding: 13px 14px; font-size: 12.8px; font-weight: 600; color: var(--ink-muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; position: relative; }
@media screen { .stick-menu a { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.stick-menu a.on { color: var(--ink); border-bottom-color: var(--orange); }
.stick-menu a:hover { color: var(--ink); }
.stick-menu-inner > a::before,
.stick-menu-inner > .stick-menu-off::before { content: ''; position: absolute; left: -1px; top: 50%; width: 1px; height: 1.2em; transform: translateY(-50%); background: var(--rule); pointer-events: none; }
/* font-size ridotto da 11px a 7.5px il 08/09/2026 (Brief "Ridurre il
   font-size del contatore CONTENUTI"): verificato via CDP che a 7.5px la
   striscia sta su una riga sola su desktop (~1440px) SENZA scroll
   orizzontale anche nello stress test peggiore (tutti e 9 i tab con un
   valore fittizio a 3 cifre, scrollWidth==clientWidth esatto). Solo
   font-size toccato, non padding/margin di etichetta/icona. Su tablet
   (~768px) l'overflow resta comunque forte (~394px con i conteggi reali
   di oggi, ~444px nello stress test) — non risolvibile riducendo ancora il
   numero senza comprometterne la leggibilità (verificato via screenshot):
   è un limite strutturale preesistente (9 tab non ci stanno in quella
   larghezza), non introdotto né risolto da questa modifica. Vedi la
   striscia stessa: ha già `overflow-x: auto` come fallback dichiarato per
   questo scenario (commento più sotto, 16/08/2026) — su tablet degrada a
   scorrimento invece di rompersi, comportamento accettato ma da rivedere
   con un intervento dedicato (badge a capo, o troncamento "99+") se
   Romolo lo ritiene necessario. */
.stick-menu a .cnt, .stick-menu-off .cnt { font-family: var(--mono); font-size: 11px; opacity: .7; }
@media screen { .stick-menu a .cnt, .stick-menu-off .cnt { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */ /* Addendum 14, punto 6: 11px (era 7,5) */
/* Barra dell'hub area tematica un po' più compatta di quella generica
   (usata anche da archive.php, single-normativa.php ecc., non toccata lì):
   con 8 tab + etichetta rischia lo scroll orizzontale su desktop non
   larghissimi (segnalato da Romolo il 16/08/2026) — meno padding qui,
   scoped con doppia classe per non alterare le altre pagine. */
.stick-menu.area-hub-stick-menu a,
.stick-menu.area-hub-stick-menu .stick-menu-off { padding: 9px 9px; gap: 4px; }
.stick-menu-off { display: flex; align-items: center; gap: 6px; padding: 13px 14px; font-size: 12.8px; font-weight: 600; color: color-mix(in srgb, var(--ink-muted) 40%, var(--white)); white-space: nowrap; cursor: default; position: relative; } /* Addendum 13: stessa resa di prima (.4 di opacità su fondo bianco) ma via colore, per non attenuare anche il separatore */

/* Addendum 13 (21/09/2026): tolta l'affordance di scroll orizzontale (gradienti .has-fade-left/right e stick-menu-fade.js): la barra non scorre più. */

/* Layout a due colonne dell'hub area tematica (Specifica v6, punto 1) —
   prima ".grid.g-side" non aveva alcuna regola CSS (verificato con grep,
   zero risultati): i blocchi si impilavano invece di stare affiancati.
   Nomi di classe nuovi e dedicati (.area-hub-*), NON riuso ".grid"/
   ".g-side" già usate da taxonomy-area_tematica-professione.php, che
   resta intatta. Sidebar sticky, top:171px = 123px navbar (a due righe,
   dal 2026-08-28) + ~48px di .stick-menu — stesso valore già in uso per
   .colonna-destra altrove nel tema (single-commento.php ecc.), non un
   numero nuovo. */
.area-hub-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 32px; align-items: start; }
.area-hub-aside { position: sticky; top: calc(var(--navbar-h, 123px) + var(--stickbar-h, 32px) + 16px); display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) {
  .area-hub-grid { grid-template-columns: 1fr; }
  .area-hub-aside { position: static; }
}

/* Layout della pagina Ricerca assistita (page-ricerca.php) — versione
   DEFINITIVA 05/09/2026 (terza correzione di Romolo sullo stesso
   argomento, sostituisce sia il tentativo a due colonne 280px/1fr sia
   quello successivo impilato a piena larghezza). Colonna principale
   risultati a sinistra (~70%) + sidebar destra (~30%) con SOLO il
   blocco "Tipo di contenuto" (Area tematica/Attività professionale/
   Organo giudicante/Periodo rimossi dalla pagina, non spostati — restano
   solo nelle pagine di area tematica). Stesso rapporto di colonne e
   stesso pattern sticky di ".area-hub-grid"/".area-hub-aside" sopra
   (Specifica v6, 16/08/2026), riusato come richiesto invece di
   ricostruito — non però lo stesso offset: qui "top:123px" (sola navbar
   a due righe), non "top:171px", perché questa pagina non ha uno
   .stick-menu/sotto-barra come l'hub area tematica — ".search-head" in
   cima (barra di ricerca) non è sticky.
   Nome ".ricerca-assistita-grid", non ".ricerca-grid": quel nome esiste
   già alla riga ~1205 per il layout — diverso — di archive.php; riusarlo
   qui romperebbe archive.php per cascata CSS. */
.ricerca-assistita-grid { display: grid; grid-template-columns: 7fr 3fr; align-items: start; gap: 24px; }
.ricerca-assistita-grid .filters-panel { position: sticky; top: var(--navbar-h, 123px); }
@media (max-width: 900px) {
  .ricerca-assistita-grid { grid-template-columns: 1fr; }
  .ricerca-assistita-grid .filters-panel { position: static; }
}

/* .section-tight: usata in 4 template (hub area, hub professione,
   ricerca, single-normativa) subito sotto uno .stick-menu/.sticky-bar,
   ma non aveva mai avuto una regola propria — il contenuto risultava
   incollato alla barra sopra. Trovato il 28/07 su segnalazione di
   Romolo sull'hub di area, corretto una sola volta per tutti e 4. */
.section-tight { padding-top: 28px; }

.norm-showcase { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; text-align: left; text-decoration: none; margin-bottom: 14px; }
.norm-showcase .ic-top { flex-shrink: 0; color: var(--ink-muted); }
.norm-showcase .k { display: block; font-size: 10px; color: var(--ink-muted); }
@media screen { .norm-showcase .k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-showcase h4 { font-size: 15px; margin-top: 6px; color: var(--orange); font-family: var(--serif); font-weight: 600; }

.type-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 8px; text-decoration: none; }
.type-tile:hover { border-color: var(--ink); }
.type-tile .lab { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
@media screen { .type-tile .lab { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.type-tile .num { font-family: var(--mono); font-size: 12px; color: var(--orange); font-weight: 600; }
@media screen { .type-tile .num { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.side-h { font-size: 11px; font-weight: 700; color: var(--ink-muted); margin: 22px 0 10px; }
@media screen { .side-h { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-h:first-child { margin-top: 0; }

.badge-row { display: flex; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }
.badge-btn { background: rgba(255,255,255,.07); border: 1px solid var(--border-on-dark); border-radius: var(--radius); padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 96px; text-decoration: none; }
.badge-btn:hover { border-color: var(--orange); }
.badge-btn .num { font-family: var(--serif); font-size: 19px; font-weight: 700; color: #fff; }
.badge-btn .lab { font-size: 10.5px; color: rgba(255,255,255,.6); }
@media screen { .badge-btn .lab { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.cta-profile { background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--radius); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.cta-profile .ttl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media screen { .cta-profile .ttl { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cta-profile .sub { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
@media screen { .cta-profile .sub { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

@media(max-width: 900px) {
  .hero-grid2 { grid-template-columns: 1fr; }
}
/* ── SINGLE-SENTENZA: fedele a sentenza.html — aggiunto 27/07/2026.
   Classi nuove, non condivise (verificato con grep prima di scrivere),
   NON tocca .scheda-header/.content-section/.cs-label/.prose/.tipo-pill/
   .meta-grid/.autore-box/.alert-box(base)/.tag-row, usate da altri 8-9
   template a cui questa sessione non ha ancora dato un mockup dedicato. */

.sen-head { background: var(--blue); color: #fff; padding: 22px 0 26px; }
.sen-head .breadcrumb { background: transparent; border-bottom: 0; padding: 0 0 8px; }
.sen-head .breadcrumb a, .sen-head .bc-sep { color: rgba(255,255,255,.55); }
.sen-head .bc-current { color: #fff; }
.sen-head h1 { font-family: var(--serif); color: #fff; font-size: var(--fs-h1); margin-top: var(--sp-2); line-height: var(--lh-h1); max-width: 760px; font-weight: 600; }
.sen-top-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.sen-meta-row { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.sen-meta-row .m { font-size: 15px; color: rgba(255,255,255,.72); }
/* .sen-back/.torna-a (pillola "Torna a" separata dal breadcrumb) rimosse
   il 2026-08-28 (Brief_ClaudeCode_Breadcrumb_dinamico_globale): la loro
   funzione confluisce nel breadcrumb stesso, ora dinamico — vedi
   accademia_breadcrumb()/accademia_*_provenienza() in functions.php. */
.sen-meta-row .m b { color: var(--text-on-dark-muted); font-weight: 600; }
.sen-meta-row .m a { color: var(--text-on-dark-muted); font-weight: 600; text-decoration: underline; }

/* .ctype generico (icona + etichetta con bordo laterale per tipo), non
   scoped a .feed-row: il mockup lo usa anche fuori dai feed (qui nell'header
   sentenza). Non tocca la regola .feed-row .ctype gia' esistente (piu'
   specifica, vince comunque dove serve). */
.ctype { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px 4px 8px; border-radius: 3px; background: var(--surface); color: var(--ink); border-left: 3px solid var(--ink-muted); flex-shrink: 0; white-space: nowrap; }
@media screen { .ctype { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ctype-normativa { border-left-color: var(--ink); }
.ctype-sentenza { border-left-color: var(--c-sentenza); }
.ctype-commento { border-left-color: var(--c-commento); }
.ctype-quesito { border-left-color: var(--c-quesito); }
.ctype-dossier { border-left-color: var(--c-dossier); }
.ctype-quaderno { border-left-color: var(--c-quaderno); }
.ctype-focus { border-left-color: var(--c-focus); }

.lock-section { position: relative; margin-top: 22px; }
.lock-section .sec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.lock-section .sec-head h3 { font-family: var(--serif); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.lock-content { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-mid); }
.lock-content h5 { font-size: 12px; color: var(--blue-mid); margin: 16px 0 6px; font-family: var(--sans); font-weight: 700; }
@media screen { .lock-content h5 { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.lock-content h5:first-child { margin-top: 0; }
.lock-content p { margin: 0 0 12px; }

.alert-box.ab-red { background: var(--red-lt); border-left: 3px solid var(--red); }
.alert-box.ab-red.box-tenue { background: #FBF6F5; }

.op-box { background: var(--green-lt); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.op-box .k { font-size: var(--fs-label); font-weight: 700; color: var(--green); margin-bottom: var(--sp-2); }
.op-box ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.7; }
@media screen { .op-box ul { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.op-box b { color: var(--ink); }

/* ── Sistema tipografico scheda Sentenza (Addendum_tipografico_scheda
   _sentenza_24-08-2026) — titolo uniforme su Abstract/Illustrazione/Alert/
   Indicazione operativa/Rischio: maiuscoletto grassetto, colore SEMPRE
   neutro nel testo, icona a sinistra colorata per tipo (unico elemento che
   porta colore). Abstract/Illustrazione: testo che scorre, nessun riquadro
   (.sez-flow). Alert/Indicazione/Rischio: riquadro bordo 1px neutro,
   identico sui tre (.sez-riquadro), mai colorato. */
.sez-titolo { display: flex; align-items: center; gap: 8px; font-variant: small-caps; font-weight: 700; font-size: 13.5px; letter-spacing: .02em; color: var(--ink); margin-bottom: 10px; }
@media screen { .sez-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sez-ic { display: inline-flex; flex-shrink: 0; }
.sez-ic .svgic { width: 17px; height: 17px; }
.sez-ic-neutro { color: var(--ink-muted); }
.sez-ic-ambra  { color: var(--amber); }
.sez-ic-verde  { color: var(--green); }
.sez-ic-rosso  { color: var(--red); }
.sez-flow { margin: var(--sp-5) 0; }
.sez-flow .sez-corpo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-mid); }
.sez-flow .sez-corpo p { margin: 0 0 12px; }
.sez-riquadro { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; background: var(--white); }
.sez-riquadro .sez-corpo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.sez-riquadro .sez-corpo p:last-child { margin-bottom: 0; }
/* Liste nei campi a editor visuale (29/09/2026): l'azzeramento generale
   ".at ul" (riga ~114) toglieva puntini e rientro anche qui, così le liste
   scritte in redazione uscivano come righe piatte — stesso ripristino già
   fatto per .prose. Prefisso .at per vincere su quell'azzeramento. */
.at .sez-corpo ul, .at .sez-corpo ol { margin: 0 0 12px; padding-left: 22px; }
.at .sez-corpo ul { list-style: disc; }
.at .sez-corpo ol { list-style: decimal; }
.at .sez-corpo li { margin-bottom: 6px; }
.at .sez-corpo li > ul, .at .sez-corpo li > ol { margin: 6px 0 0; }
.at .sez-corpo li > ul { list-style: circle; }
.at .sez-corpo ul:last-child, .at .sez-corpo ol:last-child { margin-bottom: 0; }

/* Fonti — presentazione discreta (REGIA/BRIEF Campo_Fonti 01/09/2026):
   deliberatamente SENZA .sez-riquadro (niente bordo/sfondo/icona) — le
   fonti restano un'informazione di supporto, non devono competere
   visivamente col contenuto. Etichetta didascalia, font ridotto, colore
   neutro attenuato, in chiusura del nodo/paragrafo. */
.fonti-discreto { margin: var(--sp-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
@media screen { .fonti-discreto { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fonti-discreto .fonti-label { font-variant: small-caps; letter-spacing: .02em; margin-right: 5px; }
.fonti-discreto a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--border-strong); }
.fonti-discreto a:hover { color: var(--blue); }

/* Badge fallback testo storico sentenze importate (REGIA/BRIEF 07-09-2026)
   — stessa forma discreta del box Fonti: nessun bordo/sfondo, etichetta
   didascalia, sopra il testo storico dentro Illustrazione sentenza. */
.storico-badge { margin: 0 0 var(--sp-3, 16px); padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--amber, #b7791f); border-radius: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-mid); }
@media screen { .storico-badge { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.storico-badge .storico-label { display: block; font-weight: 600; color: var(--ink); } /* avvertenza schedatura in corso (09/10/2026) */
.storico-badge .storico-nota { display: block; margin-top: 2px; }

/* Voce di massimario — unico contenuto pubblico, sempre visibile, prima
   del tab bar (non è una delle 5 sezioni sopra, resta con il trattamento
   "citazione in evidenza" già in uso su questa scheda). */
.massimario-box { background: #EEF1F6; border-left: 3px solid var(--blue-mid); border-radius: 0 5px 5px 0; padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.massimario-box .k { font-family: var(--mono); font-size: var(--fs-label); color: var(--blue-mid); }
.massimario-box p { font-size: var(--fs-body-lg); margin-top: var(--sp-2); color: #1e2c47; line-height: var(--lh-body); }

/* Fascia correlazioni sticky (brief §3 punto 6) — badge articolo puntuale
   + contatori per tipologia collegata, solo quelle con almeno 1 elemento. */
.fascia-correlazioni { position: sticky; top: var(--navbar-h, 123px); z-index: 45; background: var(--white); border: 1px solid var(--rule); border-top: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
.fc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-mid); background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 5px 12px; text-decoration: none; white-space: nowrap; transition: all .15s; flex-shrink: 0; }
@media screen { .fc-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fc-badge:hover { border-color: var(--orange); color: var(--orange); }
.fc-badge-articolo { background: var(--blue-lt); border-color: var(--blue-lt); color: var(--blue); font-family: var(--mono); font-size: 11.5px; }
@media screen { .fc-badge-articolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fc-badge .fc-n { font-family: var(--mono); opacity: .7; }

/* Lucchetto binario nella lista contenuti collegati (brief §5 punto 4 —
   Redesign_scheda_sentenza_24-08-2026): riga tipo+numero, non cliccabile
   verso il contenuto reale, verso l'abbonamento. */
.cd-riga-locked { opacity: .75; }
.cd-riga-locked:hover { opacity: 1; }
.cd-riga-lock { margin-left: auto; display: inline-flex; opacity: .6; }
.cd-riga-lock .svgic { width: 11px; height: 11px; }

/* ── Lista mista sidebar "Sullo stesso articolo" (Addendum2/4/5,
   24-25-08-2026) — sostituisce le liste separate per tipo. Etichetta
   testuale del tipo (.cd-tipo, già definita sopra) al posto di icona+tag
   area tematica (Addendum5 punto 5). ── */
.lista-mista { display: flex; flex-direction: column; gap: 12px; }
.lm-item { display: block; text-decoration: none; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.lm-item:last-child { border-bottom: none; padding-bottom: 0; }
.lm-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.lm-data { font-size: 10.5px; color: var(--ink-muted); margin-left: auto; }
@media screen { .lm-data { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* .lm-titolo ultimo elemento della card: niente più margine sotto, la riga
   estratto che seguiva è stata rimossa (round 4, 25-08-2026). */
.lm-titolo { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 0; }
@media screen { .lm-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Tab "Approfondimenti" (Addendum5 punto 3, 24-08-2026) — pill di
   navigazione verso i contenuti derivati da questa sentenza, stesso
   trattamento "lettura/navigazione, non azione" delle altre 5 sezioni:
   nessun bordo sul box (.sez-flow), sfondo pieno leggero sulle pill. */
.approf-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.approf-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); border-radius: 20px; padding: 8px 16px; text-decoration: none; transition: all .15s; }
@media screen { .approf-pill { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.approf-pill:hover { background: var(--blue-lt); color: var(--blue); }

/* Stampa in cima alla sidebar (Addendum3 punto 3) — stesso stile di
   .cd-azioni ma senza il bordo superiore che separa dai blocchi. */
.cd-azioni-top { border-top: none; padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }

.side-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.side-card h4 { font-size: 12px; color: var(--ink-muted); padding: 14px 16px 10px; font-weight: 700; }
@media screen { .side-card h4 { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-item { padding: 10px 16px; border-top: 1px solid var(--rule); }
.side-item:first-of-type { border-top: 0; }
.side-item .area { font-size: 10.5px; color: var(--blue-mid); font-weight: 700; }
@media screen { .side-item .area { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-item .ttl { display: block; font-size: 12.3px; font-weight: 600; line-height: 1.4; margin-top: 3px; color: var(--ink); text-decoration: none; }
@media screen { .side-item .ttl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.side-item .ttl:hover { color: var(--orange); }
/* ── SCHEDA NORMATIVA: fedele a normativa.html (mockup 24-25/07/2026) ──
   Aggiunto 2026-07-27. .norm-head/.idx-toolbar/.art-row/.mini-badge/
   .key-star/.tech-card sono esclusive di single-normativa.php (verificato
   con grep). .stick-menu/.searchbar sono gia' condivise da oggi (hub),
   riusate qui senza modificarle. */

.norm-head { background: var(--blue); padding: 22px 0 26px; }
.norm-head .breadcrumb { background: transparent; border-bottom: 0; padding: 0 0 8px; }
.norm-head .breadcrumb a, .norm-head .bc-sep { color: rgba(255,255,255,.55); }
.norm-head .bc-current { color: #fff; }
.norm-head .breadcrumb { background: transparent; border-bottom: 0; padding: 0 0 8px; }
.norm-head .breadcrumb a, .norm-head .bc-sep { color: rgba(255,255,255,.55); }
.norm-head .bc-current { color: #fff; }
.norm-head h1 { font-family: var(--serif); color: #fff; font-size: var(--fs-h1); margin: var(--sp-2) 0 0; line-height: var(--lh-h1); font-weight: 600; }
.norm-head .sub { font-size: 13px; color: var(--text-on-dark-muted); margin-top: 4px; }
@media screen { .norm-head .sub { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* #articoli: scroll-margin-top pari alla barra di navigazione fissa
   (123px navbar a due righe dal 2026-08-28 + 48px stick-menu = 171px,
   stessa somma già usata per .colonna-destra) — senza, il link "Indice
   articoli" (dallo stick-menu di sentenze/commenti/quesiti filtrati per
   norma) atterra con l'art. 1 nascosto sotto le due barre sticky (bug
   segnalato da Romolo il 17/08/2026, comparso da quando il titolo
   "Indice articoli" sopra l'elenco — che dava margine naturale — è
   stato tolto). */
#articoli { scroll-margin-top: calc(var(--navbar-h, 123px) + var(--stickbar-h, 48px)); } /* Addendum 14: offset dinamico (navbar + barra), ripiego 171px */
.idx-titolo { font-size: 15px; font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.idx-toolbar { display: flex; gap: 8px; margin: 0 0 14px; }
.idx-toolbar a { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white); font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: none; }
@media screen { .idx-toolbar a { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.idx-toolbar a:hover { border-color: var(--ink); }
.idx-toolbar a.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.art-row { display: flex; flex-direction: column; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--rule); background: var(--white); text-decoration: none; }
.art-row:last-child { border-bottom: 0; }
.art-row:hover { background: var(--surface); }
.art-row-top { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.art-row .num { font-size: 13px; font-weight: 600; color: var(--ink); width: 160px; flex-shrink: 0; white-space: nowrap; }
@media screen { .art-row .num { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-row .rub { font-size: 13px; flex: 1; color: var(--ink); }
@media screen { .art-row .rub { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-row:hover .rub { color: var(--orange); }
.art-row-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-left: 172px; }
.mini-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 3px; font-weight: 600; background: var(--surface); color: var(--ink-muted); border-left: 2px solid var(--ink-muted); text-decoration: none; }
@media screen { .mini-badge { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.mini-badge:hover { background: var(--ink); color: #fff; border-left-color: var(--ink); }
.mini-badge .svgic { width: 11px; height: 11px; }
.key-star { color: var(--orange); font-size: 13px; }
@media screen { .key-star { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.art-list-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }

.tech-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.tech-row:last-child { border-bottom: 0; }
.tech-row .k { color: var(--ink-muted); flex-shrink: 0; }
.tech-row .v { text-align: right; font-weight: 600; color: var(--ink); }
.go-normattiva { display: block; text-align: center; padding: 12px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--blue-mid); text-decoration: none; }
.go-normattiva:hover { background: var(--blue-mid); color: #fff; }
/* ── PAGINA RICERCA: fedele a ricerca.html — aggiunto 2026-07-27.
   Classi nuove ed esclusive di page-ricerca.php (verificato: .rf-block/
   .rf-check restano invariate, condivise con archive.php). */

.search-head { background: var(--blue); color: #fff; padding: 22px 0 26px; }
.search-head .breadcrumb { background: transparent; border-bottom: 0; padding: 0 0 8px; }
.search-head .breadcrumb a, .search-head .bc-sep { color: rgba(255,255,255,.55); }
.search-head .bc-current { color: #fff; }
.search-head h1 { color: #fff; font-size: 22px; margin: 0; }

.big-search { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: var(--radius); padding: 6px 6px 6px 16px; margin-top: 14px; max-width: 640px; }
.big-search input { border: 0; background: transparent; outline: 0; flex: 1; font-size: 15px; font-family: var(--sans); padding: 11px 0; color: var(--ink); }
.big-search button { background: var(--orange); color: #fff; border: 0; border-radius: var(--radius); padding: 11px 20px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
@media screen { .big-search button { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.filters-panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; }
.fgroup { margin-bottom: 20px; }
.fgroup:last-child { margin-bottom: 0; }
.fgroup h5 { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 10px; font-weight: 700; }
@media screen { .fgroup h5 { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fopt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--ink); cursor: pointer; }
@media screen { .fopt { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fopt input { accent-color: var(--orange); }
.fopt .cnt { margin-left: auto; font-size: 11px; color: var(--ink-muted); font-family: var(--mono); }
@media screen { .fopt .cnt { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.res-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.res-toolbar .cnt { font-size: 13px; color: var(--ink-muted); }
@media screen { .res-toolbar .cnt { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.res-toolbar select { font-size: 12.5px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 10px; background: var(--white); }

.res-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; text-decoration: none; display: block; transition: .15s; }
/* Hover leggero e coerente: solo bordo + tint minimo, niente ombre (REGIA
   UI-liste_secondo-colore-eyebrow_31-08-2026, punto 4 — box-shadow rimossa). */
.res-card:hover { border-color: var(--orange); background: var(--surface); }
.res-card .top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
/* Tipo di contenuto: testo blu, non più badge con sfondo/bordo — override
   scoped del .ctype generico (riservato ad altri contesti, non toccato),
   sempre primo elemento dell'eyebrow (REGIA, punto 1). Icona monocroma:
   l'accessibilità non deve mai dipendere dal solo colore. */
.res-card .ctype { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border-left: 0; border-radius: 0; font-size: 11px; font-weight: 600; color: var(--text-category); }
@media screen { .res-card .ctype { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.res-card .ctype .svgic { color: var(--ink-muted); width: 12px; height: 12px; }
.res-card .area { font-size: 11px; color: var(--ink-mid); font-weight: 500; text-transform: none; }
@media screen { .res-card .area { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.res-card .date { font-size: 11.5px; color: var(--ink-muted); margin-left: auto; }
@media screen { .res-card .date { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.res-card .ttl { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.res-card:hover .ttl { color: var(--orange); }
.res-card .snippet { font-size: 13px; color: var(--ink-muted); margin-top: 7px; line-height: 1.55; }
@media screen { .res-card .snippet { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.res-card mark { background: var(--orange-lt); color: var(--orange-dark); padding: 0 2px; border-radius: 2px; }
/* ── ARTICOLO NORMATIVO: azioni in header + striscia vigenza, fedeli a
   articolo.html (mockup 24-25/07/2026) — aggiunte 2026-07-27.
   Esclusive di single-articolo_normativo.php, nessuna condivisione. */
.nh-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.nh-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border-on-dark); border-radius: var(--radius); font-size: 12.5px; font-weight: 500; color: var(--text-on-dark-muted); text-decoration: none; }
.nh-actions a:hover { border-color: #fff; color: #fff; }

.vigenza-strip { display: flex; gap: 22px; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--ink-mid); }
@media screen { .vigenza-strip { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.vigenza-strip strong { font-family: var(--mono); color: var(--ink); }
/* ── HOME ABBONATO: ritocchi 27/07 sera (breadcrumb in hero, box "continua
   da dove hai lasciato") ── */
.search-hero .breadcrumb { background: transparent; border-bottom: 0; padding: 0 0 10px; margin: 0; }
.search-hero .breadcrumb-inner { padding: 0; }
.search-hero .breadcrumb a { color: rgba(255,255,255,.6); }
.search-hero .breadcrumb a:hover { color: #fff; }
.search-hero .bc-sep { color: rgba(255,255,255,.35); }
.search-hero .bc-prefisso { color: rgba(255,255,255,.5); }
.search-hero .filtra-nota { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 10px; }
@media screen { .search-hero .filtra-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* .big-search resta alla larghezza standard del sito (640px, base rule più
   sotto) — nessun override qui: è l'unico elemento ristretto nella Hero
   (Addendum4 punto 2b). */
/* Microcopy con l'esempio lungo che prima stava nel placeholder
   (Brief_ClaudeCode_Home_abbonato_15-08-2026, punto 4). Ora sulla stessa
   riga di ".sub" (Addendum4 punto 2a, dentro .sub-riga) — niente più
   margin-top verticale, l'allineamento è quello della riga flex. */
.ricerca-esempio { font-size: 11.5px; color: rgba(255,255,255,.45); }
@media screen { .ricerca-esempio { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Link "Tutto il Radar" sotto il box "In evidenza" (Decisione_CPT_Radar_
   15-08-2026: l'elenco storico completo resta sempre raggiungibile). */
.aside-radar-foot { margin-top: 10px; text-align: right; }

.resume-band { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; display: flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 24px; }
.resume-band:hover { border-color: var(--orange); }
.resume-band .ic { color: var(--orange); flex-shrink: 0; }
.resume-band .k { font-size: 11px; color: var(--ink-muted); }
@media screen { .resume-band .k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.resume-band .ttl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-top: 2px; color: var(--ink); }
@media screen { .resume-band .ttl { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.resume-band .ttl .tipo-badge { margin-top: 0; }
.resume-band .ttl .area { font-size: 11.5px; font-weight: 500; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
@media screen { .resume-band .ttl .area { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.resume-band:hover .ttl { color: var(--orange); }

/* ── NODI DEL DOSSIER (CPT 'nodo'): indice cliccabile + box alert/indicazione/
   rischio distinti dal testo continuo — aggiunto 08/08/2026. Riusa .alert-box/
   .focus-sezione/.indice-item/.ns-item gia' esistenti, nessuna duplicazione. */
a.indice-item, a.ns-item { text-decoration: none; color: inherit; cursor: pointer; }
a.indice-item:hover, a.ns-item:hover { background: var(--surface); }
.ii-tipo { font-size: 10px; color: var(--ink-muted); margin-top: 2px; }
@media screen { .ii-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nodo-affidabilita { font-size: 10px; font-weight: 600; color: var(--ink-muted); text-transform: none; letter-spacing: 0; margin-left: 8px; }
@media screen { .nodo-affidabilita { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nodo-rif-normativo { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
@media screen { .nodo-rif-normativo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nodo-box-riga { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ab-red .ab-label { color: var(--red); }
.resume-band .go { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--orange); flex-shrink: 0; }

/* ── RIEPILOGO CORRELAZIONI (Specifica_presentazione_correlazioni_al_lettore,
   13/08/2026) — striscia contatori riusata da accademia_contatori_correlati()
   (livello articolo) e riga di riepilogo a livello contenitore su
   Dossier/Quaderno/Focus, più il box "Contenuti correlati" per capitolo. */
.contatori-correlati { margin-bottom: 20px; }
.riepilogo-container-correlati { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--ink-muted); margin: 0 0 20px; }
@media screen { .riepilogo-container-correlati { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.riepilogo-container-correlati a { color: var(--orange); font-weight: 600; text-decoration: none; }
.riepilogo-container-correlati a:hover { text-decoration: underline; }
.nodo-correlati { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin-top: 18px; }
.nodo-correlati .cs-label { margin: 0 0 10px; padding: 0; }
.nodo-correlati .corr-item { background: var(--white); border-radius: var(--radius); margin-bottom: 8px; }
.nodo-correlati .corr-item:last-child { margin-bottom: 0; }
.nodo-correlati .cd-item { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; }
.nodo-correlati .cd-item:last-child { margin-bottom: 0; }
.cit-link { color: var(--blue-mid); text-decoration-style: dotted; }

/* ── STAMPA (richiesta di Romolo 17/08/2026: "manca la possibilità
   dell'abbonato di stampare in pdf il contenuto della scheda" — il
   pulsante Stampa (window.print()) c'era già nella colonna destra, ma
   senza un foglio di stile dedicato la stampa portava via anche navbar,
   breadcrumb, stick-menu e colonna destra: praticamente inutilizzabile.
   Regole generiche sulle classi condivise di navigazione/UI — valgono su
   tutte le schede (sentenza/commento/quesito/normativa/articolo), non
   solo su sentenza. */
@media print {
  #wpadminbar, .navbar, .at-footer,
  .breadcrumb, .sticky-nav, .stick-menu,
  .col-destra, .sidebar, .cd-azioni,
  button, .lock-cta { display: none !important; }
  body { background: #fff; }
  .sen-head, .norma-header, .norm-head { background: none !important; color: #000 !important; padding: 0 0 14px !important; }
  .sen-head h1, .norma-header .nh-sigla, .norma-header .nh-titolo,
  .norm-head h1, .norm-head .sub { color: #000 !important; }
  .sen-meta-row .m, .sen-meta-row .m b { color: #333 !important; }
  .page-grid-cd, .page-inner-grid { display: block; padding: 0; }
  .main-col { width: 100%; }
  a { color: #000; text-decoration: underline; }
  .domanda-box, .massima-box, .op-box, .lock-section, .alert-box { break-inside: avoid; } /* le sezioni intere no: lasciavano mezze pagine vuote (09/10/2026) */
}
/* ── ORIENTAMENTI GIURISPRUDENZIALI (Addendum 10, 21/09/2026) ─────────
   Scheda orientamento B1: badge di stato SOPRA il testo (mai accanto),
   domanda guida come testo principale, riga secondaria. Larghezza minima
   300px (min(300px,100%) per non rompere lo schermo stretto). */
.orient-card { min-width: min(300px, 100%); display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.orient-card:last-child { border-bottom: none; }
.orient-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; min-width: 0; }
.orient-badge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.orient-badge .tem-badge-label { white-space: normal; }
.orient-domanda { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.orient-card--compatta .orient-domanda { font-size: 13px; }
@media screen { .orient-card--compatta .orient-domanda { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.orient-link:hover .orient-domanda { color: var(--blue); }
.orient-sec { font-size: 11.5px; line-height: 1.45; color: var(--ink-muted); }
@media screen { .orient-sec { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.orient-riga { font-size: 12px; line-height: 1.4; color: var(--ink); }
@media screen { .orient-riga { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.orient-riga .k { font-weight: 600; color: var(--ink-muted); }
.orient-vedi, .orient-tutti { font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; }
@media screen { .orient-vedi, .orient-tutti { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.orient-vedi:hover, .orient-tutti:hover { text-decoration: underline; }
.orient-tutti { display: block; padding-top: 10px; }
/* Home pubblica, sezione "Orientamenti in evidenza" (25/09/2026): tre schede affiancate. */
.orient-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.orient-home-grid .orient-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px; min-width: 0; }
.orient-home-grid .orient-card:last-child { border-bottom: 1px solid var(--rule); }
.orient-home-grid .orient-domanda { font-family: var(--serif); font-size: 16px; }
.aside-orientamenti { margin-top: 4px; }
.aside-orientamenti .aside-list { padding: 0 16px; }
@media (max-width: 900px) { .orient-home-grid { grid-template-columns: 1fr; } }
/* Percorsi in home (BRIEF percorsi Fase 2, punto F): sezione pubblica a card,
   stessa griglia e stesso riquadro delle card Orientamenti; riquadro «Come
   usare Accademia» in colonna destra della home abbonato. */
.percorsi-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.percorso-card { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px; min-width: 0; text-decoration: none; color: inherit; transition: border-color .15s; }
.percorso-card:hover { border-color: var(--orange); }
.percorso-card-k { font-size: 10.5px; font-weight: 700; color: var(--orange); }
@media screen { .percorso-card-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.percorso-card-nome { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--blue); line-height: 1.35; }
.percorso-card:hover .percorso-card-nome { color: var(--orange); }
.percorso-card-desc { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
@media screen { .percorso-card-desc { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 900px) { .percorsi-home-grid { grid-template-columns: 1fr; } }
/* Indice /percorsi/ (BRIEF percorsi indice v2, punto B): 1 colonna, 2 da
   700px, 3 da 1100px; stessa card .percorso-card della home. */
.percorsi-indice-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .percorsi-indice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .percorsi-indice-grid { grid-template-columns: repeat(3, 1fr); } }
.percorso-card-tuo { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 9.5px; letter-spacing: .04em; vertical-align: 1px; }
@media screen { .percorso-card-tuo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.percorso-card-n { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--blue); }
@media screen { .percorso-card-n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-guida .aside-head { position: relative; padding-right: 40px; }
.aside-guida-chiudi { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); margin: 0; }
.aside-guida-chiudi button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 20px; line-height: 28px; cursor: pointer; }
.aside-guida-chiudi button:hover, .aside-guida-chiudi button:focus, .aside-guida-chiudi button:active { background: var(--surface); color: var(--ink); }
.at .aside-guida-punti { margin: 0; padding: 12px 16px 4px 32px; list-style: disc; font-size: 13px; line-height: 1.5; color: var(--ink); }
@media screen { .at .aside-guida-punti { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.at .aside-guida-punti li { margin-bottom: 7px; }
.aside-guida-foot { padding: 4px 16px 14px; }
/* Colonna destra più larga (min 300px) solo dove c'è una scheda orientamento */
.page-grid-cd--orient { grid-template-columns: 1fr minmax(300px, 300px); }
@media (max-width: 900px) { .page-grid-cd--orient { grid-template-columns: 1fr; } }
/* Addendum 14, punto 1 (21/09/2026): sotto i 900 px la scheda orientamento (single-tematismo.php) e la scheda sentenza
   (single-sentenza.php) sono a COLONNA SINGOLA: contenuto principale per primo, colonna destra DOPO (non più order:-1),
   blocchi .cd-blocco uno sopra l'altro a tutta la larghezza del contenitore (max 720 px), nessuna striscia orizzontale
   e nessun overflow-x. Scoped sui due wrapper (.col-destra--orient / .col-destra--etichette, che compaiono solo in
   quei due template): commento, quesito, art. 3 e normativa restano com'erano. Da 901 px in su resta laterale. */
@media (max-width: 900px) {
  .col-destra--orient, .col-destra--etichette { order: 0; }
  .col-destra--orient .colonna-destra, .col-destra--etichette .colonna-destra { flex-direction: column; gap: 20px; overflow: visible; padding: 18px 0 0; border-bottom: none; width: 100%; max-width: 720px; box-sizing: border-box; }
  .col-destra--orient .cd-blocco, .col-destra--etichette .cd-blocco { flex-direction: column; align-items: stretch; gap: 2px; flex-shrink: 1; min-width: 0; }
  .col-destra--orient .cd-label, .col-destra--etichette .cd-label { margin-bottom: 6px; white-space: normal; }
  .col-destra--orient .cd-item, .col-destra--etichette .cd-item { flex-direction: row; align-items: center; gap: 9px; padding: 8px 0; min-width: 0; border-bottom: 1px solid var(--rule); }
  .col-destra--orient .cd-item:last-child, .col-destra--etichette .cd-item:last-child { border-bottom: none; }
  .col-destra--orient .cd-item .cd-arrow, .col-destra--etichette .cd-item .cd-arrow { display: block; }
  .col-destra--orient .cd-azioni, .col-destra--etichette .cd-azioni { flex-direction: column; border-top: 1px solid var(--rule); padding-top: 14px; margin-left: 0; flex-shrink: 1; }
}
/* Norme collegate: etichetta e titolo su righe distinte — dal 21/09/2026 (Addendum 13, punto 5) è la regola generale `.cd-body .cd-tipo/.cd-titolo` più sopra. */
.aside-list.orient-lista { padding: 2px 16px 12px; }
/* Ricerca: blocco "Orientamenti giurisprudenziali su questo tema" sopra i risultati; righe negli card dei risultati */
.orient-ricerca { border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius); background: var(--white); padding: 10px 16px 4px; margin-bottom: 16px; }
.orient-ricerca-titolo { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--orange); }
@media screen { .orient-ricerca-titolo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.res-card .orient-sec { margin-top: 3px; }
.res-card .orient-riga { margin-top: 5px; }
.tem-sent-linea { font-size: 11.5px; font-weight: 600; color: var(--orange); margin-top: 2px; }
@media screen { .tem-sent-linea { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Archivio orientamenti (Fase D): gruppi per tema, riga "Filtrato per", link "Segnalacela" */
.orient-gruppo { margin-bottom: 28px; }
.orient-gruppo-titolo { font-size: 13px; font-weight: 700; color: var(--orange); margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--orange); }
@media screen { .orient-gruppo-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.orient-filtrato { font-size: 13px; color: var(--ink-muted); margin: 0 0 18px; }
@media screen { .orient-filtrato { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.orient-filtrato a { color: var(--blue); font-weight: 600; }
.orient-segnala { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-muted); }
.orient-segnala a { color: var(--blue); font-weight: 600; }
/* Addendum 14, punto 5 (21/09/2026): bersagli di tocco ≥ 40 px sotto i 1100 px o con puntatore "coarse". Solo i link elencati;
   NON .tem-badge (non è un link) né .mini-badge (normativa). Nei filtri (.rf-check) il link occupa la riga intera:
   ::after allarga l'area cliccabile anche al contatore a destra. */
@media (max-width: 1100px), (pointer: coarse) {
  .orient-tutti { display: flex; align-items: center; min-height: 40px; padding-top: 0; }
  .orient-vedi, .orient-segnala a, .orient-filtrato a { display: inline-flex; align-items: center; min-height: 40px; }
  .rf-check:has(> a) { position: relative; padding: 0; }
  .rf-check > a { display: flex; align-items: center; min-height: 40px; }
  .rf-check > a::after { content: ''; position: absolute; inset: 0; }
}
/* Archivio trasversale (Addendum 11, B4): intestazione dell'area come primo raggruppamento */
.orient-area-titolo { font-family: var(--serif, inherit); font-size: 20px; font-weight: 700; color: var(--ink); margin: 34px 0 14px; }
.orient-area-titolo:first-child { margin-top: 0; }
/* Ricerca (Addendum 11, C4): card sentenza collegata a un orientamento — il contenitore porta il riquadro, la card interna no */
.res-card-wrap { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); margin-bottom: 12px; transition: .15s; }
.res-card-wrap:hover { border-color: var(--orange); }
.res-card-wrap .res-card { border: 0; margin-bottom: 0; background: transparent; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: 10px; }
.res-orient { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 0 20px 14px; }
.res-orient-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* ══ PIANI DI ABBONAMENTO (25/09/2026, Specifica completamento home p. 2) ══
   page-abbonamento.php (scelta del piano) + templates/abbonamento-singolo.php
   e templates/abbonamento-studio-pa.php (moduli dimostrativi: calcolano il
   prezzo in pagina ma non inviano nulla, nessun sistema di pagamento).
   Prefisso .sott- perché .abb- e .piano- sono già usati altrove. */
.sott-body { padding-top: 40px; padding-bottom: 64px; }
.sott-avviso { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--ink-mid); line-height: 1.55; margin-bottom: 28px; }
@media screen { .sott-avviso { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-avviso a { color: var(--orange); text-decoration: underline; }

/* Scelta del piano */
.sott-scelta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sott-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; }
.sott-card-tag { font-size: 10px; font-weight: 700; color: var(--orange); margin-bottom: 8px; }
@media screen { .sott-card-tag { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-card h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--blue); line-height: 1.3; margin-bottom: 8px; }
.sott-card-per { font-size: 13px; color: var(--ink-muted); line-height: 1.5; margin-bottom: 18px; }
@media screen { .sott-card-per { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-prezzi { border-top: 1px solid var(--rule); margin-bottom: 18px; }
.sott-prezzo-riga { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-mid); }
@media screen { .sott-prezzo-riga { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-prezzo-riga b { font-family: var(--serif); font-size: 17px; color: var(--ink); white-space: nowrap; }
.sott-punti { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-mid); line-height: 1.5; }
@media screen { .sott-punti { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-punti li { padding-left: 18px; position: relative; }
/* Lineetta al posto del + (Romolo e Alessia, 31/10/2026): nel sito il + vuol dire «apri» e accanto a «+ IVA» si legge «in più». */
.sott-punti li::before { content: '\2013'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.sott-card .btn-primary { margin-top: auto; text-align: center; padding: 11px 18px; font-size: 14px; }
.sott-nota { font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; margin-top: 32px; text-align: center; }
@media screen { .sott-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-nota a { color: var(--ink-mid); text-decoration: underline; }

/* Moduli */
.sott-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.sott-form fieldset { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.sott-form legend { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blue); padding: 0 0 10px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); width: 100%; }
.sott-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.sott-griglia.tre { grid-template-columns: 1fr 2fr 1fr; }
.sott-campo { margin-bottom: 14px; }
.sott-griglia .sott-campo { margin-bottom: 0; }
.sott-campo label, .sott-lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--ink-muted); }
@media screen { .sott-campo label, .sott-lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-campo input:not([type=radio]):not([type=checkbox]), .sott-campo select, .sott-nominativi input { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 11px; font-size: 13.5px; background: var(--white); color: var(--ink); font-family: inherit; }
@media screen { .sott-campo input:not([type=radio]):not([type=checkbox]), .sott-campo select, .sott-nominativi input { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-campo input:not([type=radio]):focus, .sott-campo select:focus, .sott-nominativi input:focus { outline: 2px solid var(--orange-lt); border-color: var(--orange); }
.sott-aiuto { font-size: 11.5px; color: var(--ink-muted); margin-top: 5px; line-height: 1.45; }
@media screen { .sott-aiuto { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.sott-varianti { display: flex; flex-direction: column; gap: 10px; }
.sott-variante { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; background: var(--white); }
.sott-variante:has(input:checked) { border: 2px solid var(--orange); padding: 13px 15px; background: var(--orange-lt); }
.sott-variante input { margin-top: 3px; accent-color: var(--orange); }
.sott-variante-nome { font-weight: 600; color: var(--ink); font-size: 14px; }
.sott-variante-nota { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; margin-top: 3px; }
@media screen { .sott-variante-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-variante-prezzo { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sott-coupon { margin-top: 12px; }
.sott-coupon[hidden] { display: none; }
.sott-radio-riga { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink); }
@media screen { .sott-radio-riga { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-radio-riga label { display: flex; white-space: nowrap; font-weight: 400; margin: 0; padding: 0; background: none; align-items: center; gap: 7px; cursor: pointer; }
.sott-radio-riga input { accent-color: var(--orange); width: auto; margin: 0; }

.sott-nominativi { width: 100%; border-collapse: collapse; border: 0; margin: 0; }
.sott-nominativi th, .sott-nominativi td { border: 0; background: transparent; }
.sott-nominativi th { text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-muted); padding: 0 6px 8px 0; }
@media screen { .sott-nominativi th { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-nominativi td { padding: 0 6px 8px 0; vertical-align: middle; }
.sott-nominativi td.n { width: 28px; font-size: 12px; color: var(--ink-muted); font-weight: 600; }
@media screen { .sott-nominativi td.n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-nominativi td.x { width: 36px; padding-right: 0; }
.sott-rimuovi { width: 32px; height: 36px; border: 1px solid var(--rule); background: var(--white); border-radius: var(--radius); color: var(--ink-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.sott-rimuovi:hover { border-color: var(--orange); color: var(--orange); }
.sott-rimuovi:disabled { opacity: .35; cursor: not-allowed; }
.sott-aggiungi { background: transparent; border: 1px dashed var(--rule); border-radius: var(--radius); padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; margin-top: 4px; }
@media screen { .sott-aggiungi { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-aggiungi:hover { border-color: var(--blue); }

.sott-consensi label { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-mid); line-height: 1.5; margin-bottom: 10px; cursor: pointer; }
@media screen { .sott-consensi label { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-consensi input { margin-top: 3px; accent-color: var(--orange); }
.sott-consensi a { color: var(--orange); text-decoration: underline; }

.sott-riepilogo { position: sticky; top: 24px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.sott-riepilogo-head { background: var(--blue); color: #fff; padding: 14px 18px; font-size: 12px; font-weight: 700; }
@media screen { .sott-riepilogo-head { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-riepilogo-body { padding: 16px 18px; }
.sott-riga { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-mid); padding: 7px 0; border-bottom: 1px solid var(--rule); }
@media screen { .sott-riga { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-riga span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.sott-totale { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; }
.sott-totale span:first-child { font-size: 12px; font-weight: 700; color: var(--blue); }
@media screen { .sott-totale span:first-child { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-totale span:last-child { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); }
.sott-riepilogo-nota { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin-top: 8px; }
@media screen { .sott-riepilogo-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-invio { width: 100%; margin-top: 16px; padding: 11px 16px; font-size: 14px; opacity: .55; cursor: not-allowed; }
.sott-invio-nota { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin-top: 8px; text-align: center; }
@media screen { .sott-invio-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-invio-nota a { color: var(--orange); text-decoration: underline; }
/* Prenotazione dell'abbonamento (Romolo 12/10/2026): pulsante attivo, errori, conferma. */
.sott-invio:not(:disabled) { opacity: 1; cursor: pointer; }
.sott-errori { background: var(--surface); border: 1px solid var(--red, #b3261e); border-left: 3px solid var(--red, #b3261e); border-radius: var(--radius); padding: 12px 16px; font-size: 14px; color: var(--ink-mid); line-height: 1.55; margin-bottom: 28px; }
.sott-errori:focus { outline: none; }
.sott-errori ul { margin: 6px 0 0 18px; padding: 0; }
.sott-prenotata { max-width: 680px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 22px 26px; font-size: 15px; color: var(--ink-mid); line-height: 1.6; }
.sott-prenotata p { margin: 0 0 10px; }
.sott-prenotata h2 { margin: 0 0 10px; font-size: 22px; color: var(--ink); }
.sott-prenotata dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sott-prenotata dt { color: var(--ink-muted); }
.sott-prenotata dd { margin: 0; color: var(--ink); }
.sott-prenotata a { color: var(--orange); text-decoration: underline; }
@media (max-width: 560px) { .sott-prenotata { padding: 18px 16px; } .sott-prenotata dl { grid-template-columns: 1fr; gap: 2px; } .sott-prenotata dd { margin-bottom: 8px; } }

@media (max-width: 900px) {
  .sott-scelta, .sott-layout { grid-template-columns: 1fr; }
  .sott-riepilogo { position: static; }
}
@media (max-width: 600px) {
  .sott-griglia, .sott-griglia.tre { grid-template-columns: 1fr; }
  .sott-card { padding: 22px 18px; }
  .sott-nominativi thead { display: none; }
  .sott-nominativi tr { display: grid; grid-template-columns: 24px 1fr 1fr 36px; gap: 6px; margin-bottom: 12px; }
  .sott-nominativi td { padding: 0; }
  .sott-nominativi td.email { grid-column: 2 / 4; }
}

/* ── Pagina "Romolo Balasso architetto" (ID 5520, 26/09/2026) ──
   Schema della scheda "Curatore del sito" di tecnojus.it (foto, ruolo in
   arancione, Pubblicazioni espandibile) con i token di Accademia. */
.pagina-curatore .curatore-grid { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start; margin-bottom: 32px; }
.pagina-curatore .curatore-foto-img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule); }
.pagina-curatore .curatore-ruolo { font-size: 13px; font-weight: 600; color: var(--orange); line-height: 1.5; margin-bottom: 12px; }
@media screen { .pagina-curatore .curatore-ruolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pagina-curatore .curatore-collana { background: var(--orange-lt); border: 1px solid var(--orange); border-left-width: 4px; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 40px; scroll-margin-top: 120px; }
.pagina-curatore .curatore-collana-lbl { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.pagina-curatore .curatore-collana .btn-primary { text-decoration: none; margin-top: 4px; }
.pagina-curatore .curatore-acc { border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; margin-bottom: 32px; scroll-margin-top: 120px; }
.pagina-curatore .curatore-acc summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; padding: 14px 18px; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--blue); }
.pagina-curatore .curatore-acc summary::-webkit-details-marker { display: none; }
.pagina-curatore .curatore-acc .acc-icon::before { content: "+"; font-family: var(--sans, inherit); font-size: 22px; font-weight: 400; color: var(--orange); }
.pagina-curatore .curatore-acc[open] .acc-icon::before { content: "−"; }
.pagina-curatore .curatore-acc[open] summary { border-bottom: 1px solid var(--rule); }
.pagina-curatore .curatore-acc-body { padding: 14px 18px 18px; }
@media (max-width: 700px) {
  .pagina-curatore .curatore-grid { grid-template-columns: 1fr; gap: 16px; }
  .pagina-curatore .curatore-foto-img { width: 110px; height: 110px; }
}

/* Home, scheda personale in "Chi siamo": riga Collana Tecnojus (26/09/2026) */
.cred-collana { margin-top: 10px; font-size: 13px; font-weight: 600; }
@media screen { .cred-collana { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cred-collana a { color: var(--orange); text-decoration: none; }
.cred-collana a:hover, .cred-collana a:focus-visible { text-decoration: underline; }

/* Abbonamento, 26/09/2026: variante Standard non sottoscrivibile nel primo
   anno (solo_rinnovo in accademia_abbonamento_piani) e box convenzioni. */
.sott-variante.sott-variante-off { cursor: not-allowed; background: var(--surface); border-style: dashed; }
.sott-variante-off .sott-variante-nome, .sott-variante-off .sott-variante-prezzo { color: var(--ink-muted); }
/* Prezzi non sceglibili oggi (lo Standard durante il periodo di avvio): sbiaditi, come non attivi, mai barrati (Romolo 06/11/2026). */
.sott-variante.sott-variante-off { opacity: .55; }
.sott-prezzo-riga.sott-prezzo-off { opacity: .45; }
.sott-solo-rinnovo { font-size: 11px; font-weight: 600; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
@media screen { .sott-solo-rinnovo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-convenzione { display: flex; align-items: center; gap: 28px; margin-top: 24px; background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius-lg); padding: 24px 28px; }
.sott-convenzione h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--blue); line-height: 1.3; margin-bottom: 8px; }
.sott-convenzione p { font-size: 13.5px; color: var(--ink-mid); line-height: 1.6; margin: 0; }
@media screen { .sott-convenzione p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-convenzione .btn-primary { flex-shrink: 0; padding: 11px 18px; font-size: 14px; text-decoration: none; }
@media (max-width: 760px) { .sott-convenzione { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } }
.sott-body .sott-convenzione + .sott-nota { margin-top: 28px; }
/* Come funziona l'abbonamento Studio/PA (26/09/2026): tre passaggi numerati. */
.sott-come { margin-top: 24px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px 28px; }
.sott-come h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--blue); line-height: 1.3; margin-bottom: 16px; }
.sott-come-passi { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sott-come-passi li { counter-increment: passo; position: relative; padding-top: 38px; font-size: 13.5px; color: var(--ink-mid); line-height: 1.6; }
@media screen { .sott-come-passi li { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sott-come-passi li::before { content: counter(passo); position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-lt); color: var(--orange); font-family: var(--serif); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.sott-come-passi b { color: var(--ink); }
@media (max-width: 760px) { .sott-come { padding: 20px; } .sott-come-passi { grid-template-columns: 1fr; gap: 18px; } }

/* ── Pagina Convenzioni: modulo di richiesta (26/09/2026) ──
   Riusa i campi .sott- dei moduli abbonamento. */
.pagina-convenzioni .conv-invio { padding: 11px 20px; font-size: 14px; }
.conv-destinatario { font-size: 14px; color: var(--ink-mid); margin: 0 0 20px; padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--orange); border-radius: var(--radius); }
.conv-form legend { font-size: 15px; }
.conv-facoltativo { font-weight: 400; color: var(--ink-muted); }
.conv-form textarea { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 11px; font-size: 13.5px; font-family: inherit; background: var(--white); color: var(--ink); resize: vertical; }
@media screen { .conv-form textarea { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.conv-form textarea:focus { outline: 2px solid var(--orange-lt); border-color: var(--orange); }
.conv-errore input, .conv-errore select, .conv-errore textarea { border-color: var(--red, #b3261e) !important; }
.conv-errore-msg { font-size: 12px; color: var(--red, #b3261e); margin-top: 5px; }
@media screen { .conv-errore-msg { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.conv-ko { font-size: 13.5px; color: var(--red, #b3261e); background: #fdecea; border: 1px solid #f3c1bc; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 20px; }
@media screen { .conv-ko { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.conv-ok { font-size: 14px; color: var(--ink); background: #e8f4ec; border: 1px solid #b9dcc5; border-left: 3px solid var(--green, #2e7d4f); border-radius: var(--radius); padding: 14px 16px; line-height: 1.6; }
.conv-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .conv-form .sott-griglia { grid-template-columns: 1fr; } }
/* Piani: dicitura "+ IVA" (fino al 12/10/2026 "IVA compresa") accanto a ogni importo e riga sotto le
   schede (26/09/2026). Su schermi stretti l'importo può andare a capo
   (allineato a destra) invece di allargare la scheda. */
.sott-prezzo-riga b { text-align: right; }
.sott-iva { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
@media screen { .sott-iva { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 600px) { .sott-prezzo-riga b { white-space: normal; } }
.sott-body .sott-iva-riga { margin-top: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--blue); }
/* Convenzioni: testo espandibile (26/09/2026). A testo chiuso il blocco è
   tagliato a 220px e sfuma verso il colore di sfondo della pagina
   (--conv-fade-bg = --surface, lo sfondo di body.at-body). */
.conv-espandi { --conv-fade-bg: var(--surface); position: relative; }
.conv-espandi.is-chiuso { max-height: 220px; overflow: hidden; }
.conv-espandi.is-chiuso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient( to bottom, transparent, var(--conv-fade-bg) ); pointer-events: none; }
body.at-body--white .conv-espandi { --conv-fade-bg: var(--white); }
.conv-espandi-btn { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 28px; padding: 6px 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--orange); }
.conv-espandi-btn:hover .conv-espandi-lbl, .conv-espandi-btn:focus-visible .conv-espandi-lbl { text-decoration: underline; }
.conv-espandi-btn[hidden] { display: none; }
.pagina-convenzioni .content-section-prose { scroll-margin-top: calc(var(--navbar-h, 123px) + 24px); }
@media print { .conv-espandi.is-chiuso { max-height: none; overflow: visible; } .conv-espandi.is-chiuso::after, .conv-espandi-btn { display: none; } }
/* Piani (26/09/2026): seconda riga descrittiva sotto il sottotitolo delle schede. */
.sott-card-per:has(+ .sott-card-per-2) { margin-bottom: 4px; }
/* Blocco fatturazione condiviso (partials/fatturazione.php). */
.fatt [hidden] { display: none !important; }
.fatt-pa { margin-top: 4px; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.fatt-pa .sott-griglia { margin-bottom: 8px; }
.fatt-pa .sott-griglia.tre { grid-template-columns: 1fr 1.2fr 1.6fr; }
@media (max-width: 600px) { .fatt .sott-griglia, .fatt .sott-griglia.tre { grid-template-columns: 1fr; } }
/* Fatturazione, 26/09/2026: indirizzo scomposto, stato nel riepilogo. */
.fatt-intro { margin: -6px 0 14px; }
.fatt-sede-lbl { font-size: 13px; font-weight: 700; color: var(--ink); margin: 6px 0 8px; }
@media screen { .fatt-sede-lbl { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fatt .sott-griglia.fatt-via { grid-template-columns: 3fr 1fr; }
.fatt .sott-griglia.tre.fatt-luogo { grid-template-columns: 1fr 3fr 1fr; }
.sott-riga.sott-riga-fatt span[data-fatt-stato] { color: var(--red, #b3261e); }
.sott-riga.sott-riga-fatt span[data-fatt-stato].is-ok { color: var(--green, #2e7d4f); }
@media (max-width: 600px) { .fatt .sott-griglia.fatt-via, .fatt .sott-griglia.tre.fatt-luogo { grid-template-columns: 1fr; } }
.fatt-nazione { max-width: 240px; }
.fatt-nazione input[readonly] { background: var(--surface) !important; color: var(--ink-muted) !important; cursor: default; }
/* Passo "Accesso" (partials/accesso.php, predisposto 26/09/2026, non ancora nei moduli). */
.acc-pwd { display: flex; gap: 8px; }
.acc-pwd input { flex: 1; }
.acc-mostra { flex-shrink: 0; border: 1px solid var(--rule); background: var(--white); border-radius: var(--radius); padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; }
@media screen { .acc-mostra { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.acc-forza { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 18px; font-size: 12px; color: var(--ink-muted); }
@media screen { .acc-forza { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.acc-forza-barra { flex: 0 0 140px; height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.acc-forza-barra i { display: block; height: 100%; width: 0; background: #b3261e; transition: width .2s; }
.acc-forza-barra i[data-livello="2"] { background: #c98a00; }
.acc-forza-barra i[data-livello="3"], .acc-forza-barra i[data-livello="4"] { background: #2e7d4f; }

/* ── Telefoni: elementi più larghi dello schermo (28/09/2026) ──
   Un solo elemento che sborda allarga tutta la pagina e il telefono la
   rimpicciolisce per farla stare: l'effetto "sito non responsive" segnalato
   da Romolo su test.accademia.tv. Misurati a 320-390px:
   - barra .sticky-bar della Scheda abbonato (4 voci su una riga, 528px a 360):
     ora va a capo;
   - riquadro "Continua da dove hai lasciato" (.resume-band) con titolo lungo:
     il testo si restringe e va a capo invece di spingere fuori "Riprendi";
   - casella di ricerca .searchbar a 320px: il campo può restringersi;
   - riquadro norma in oggetto del Commento (.norma-oggetto) con sigla lunga:
     la sigla va sopra il titolo invece di spingerlo fuori. */
.sticky-bar-inner { flex-wrap: wrap; }
.resume-band > div { min-width: 0; }
.resume-band .ttl { flex-wrap: wrap; }
.searchbar input { min-width: 0; }
@media (max-width: 600px) {
  .sticky-bar-inner .sb-item { padding-left: 10px; padding-right: 10px; }
  .sticky-bar-inner .sb-sep { display: none; }
  .resume-band { flex-wrap: wrap; }
  .resume-band .go { margin-left: 0; width: 100%; }
  .searchbar { padding-left: 12px; }
  .searchbar .go2 { padding-left: 14px; padding-right: 14px; }
  .norma-oggetto { flex-wrap: wrap; }
  .no-sigla { white-space: normal; }
  .no-body { min-width: 0; }
}

/* ── Aree di interesse dell'abbonato (29/09/2026) ──
   Home loggato: blocco "Le tue aree" sotto la ricerca (link agli hub +
   "Home generale"). Scheda abbonato: elenco delle 5 aree con checkbox. */
.tue-aree { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 24px; }
.tue-aree .k { font-size: 11px; color: var(--ink-muted); margin-right: 4px; }
@media screen { .tue-aree .k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tue-aree a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13px; text-decoration: none; }
@media screen { .tue-aree a { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tue-aree a svg { width: 16px; height: 16px; flex-shrink: 0; }
.tue-aree-link { font-weight: 600; color: var(--ink); background: var(--surface); border-radius: 20px; padding: 0 14px; }
.tue-aree-link:hover { color: var(--orange); }
.tue-aree-generale { margin-left: auto; color: var(--ink-muted); font-weight: 500; }
.tue-aree-generale:hover { color: var(--blue); }
.tue-aree-ritorno { margin: 0 0 16px; font-size: 13px; text-align: right; }
@media screen { .tue-aree-ritorno { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tue-aree-ritorno a { font-weight: 600; color: var(--orange); text-decoration: none; }
.aree-interesse-scelte { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.aree-interesse-scelte label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
@media screen { .aree-interesse-scelte label { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aree-interesse-scelte input { width: 16px; height: 16px; margin: 0; accent-color: var(--orange); flex-shrink: 0; }
.aree-interesse-scelte .ai-ic { color: var(--blue); display: inline-flex; }
.aree-interesse-scelte .ai-ic svg { width: 18px; height: 18px; }
#aree-interesse { scroll-margin-top: calc(var(--navbar-h, 123px) + var(--stickbar-h, 48px) + 16px); } /* dopo il salvataggio il titolo e la conferma non finiscono sotto le barre fisse */
.aree-esito { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 14px; }
@media screen { .aree-esito { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aree-esito svg { width: 16px; height: 16px; flex-shrink: 0; }
.aree-esito-ok { color: var(--green); }
.aree-esito-ko { color: var(--red); }
.gate-motivo { font-size: 13px; color: var(--red); font-weight: 600; margin: 0 auto 14px; max-width: 520px; text-align: center; }
@media screen { .gate-motivo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Riquadro "Password" della scheda (REGIA 29/09/2026) */
.pwd-form p { margin: 0 0 12px; font-size: 13px; color: var(--ink); }
@media screen { .pwd-form p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pwd-form input[type=password] { width: 100%; max-width: 360px; min-height: 40px; padding: 8px 10px; margin-top: 4px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
@media (max-width: 600px) {
  .tue-aree-generale { margin-left: 0; }
}

/* Pagina «Accedi» /accedi/ (Romolo 01/10/2026, strada 2): modulo a sinistra,
   informazioni a destra; una colonna sotto i 800px. */
.accedi-body { padding-top: 32px; padding-bottom: 64px; }
.accedi-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 340px); gap: 32px; align-items: start; }
@media (max-width: 800px) { .accedi-grid { grid-template-columns: 1fr; gap: 20px; } }
.accedi-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 26px 28px 22px; }
.at .accedi-titolo { font-size: 19px; color: var(--blue); margin-bottom: 16px; }
.accedi-form p { margin: 0 0 14px; }
.accedi-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
@media screen { .accedi-form label { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.accedi-form input[type=text], .accedi-form input[type=password] { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-strong, #C7CABF); border-radius: 6px; font-size: 15px; box-sizing: border-box; background: #fff; }
.accedi-form input[type=text]:focus, .accedi-form input[type=password]:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.accedi-ricordami label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink-muted); }
.accedi-btn { width: 100%; min-height: 44px; font-size: 15px; }
.accedi-recupero { margin: 14px 0 0; font-size: 13px; text-align: center; }
@media screen { .accedi-recupero { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.accedi-recupero a { color: var(--blue); }
.accedi-msg { margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; }
@media screen { .accedi-msg { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.accedi-msg.is-ko { background: #FDF0EC; border: 1px solid #E8B6A6; color: #8A2E12; }
.accedi-msg.is-ok { background: #EEF5EA; border: 1px solid #B9D3AC; color: #375623; }
.accedi-aside { display: flex; flex-direction: column; gap: 14px; }
.accedi-info { padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: transparent; }
.at .accedi-info h3 { font-size: 15px; color: var(--blue); margin-bottom: 4px; }
.accedi-info p { font-size: 13px; color: var(--ink-muted); margin-bottom: 8px; }
@media screen { .accedi-info p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */


/* ── PUBBLICAZIONI (BRIEF pubblicazioni_flipbook, fase 2, 02/10/2026) ──
   archive-pubblicazione.php e single-pubblicazione.php. Solo variabili e
   componenti già del tema (banded-header, meta-grid, attivita-pill,
   btn-primary/btn-ghost, sez-titolo). Stato sempre icona + testo. */
.bh-banda.banda-blue { background: var(--blue); }

.pub-archivio { padding: 28px 24px 64px; }

/* Formato delle copertine reali delle profilazioni (1055x1490, 03/10/2026); contain: la copertina non viene mai ritagliata. */
.pub-cover { display: block; aspect-ratio: 1055 / 1490; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.pub-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pub-cover-vuota { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-muted); }
.pub-cover-vuota .svgic { width: 36px; height: 36px; }
.pub-vuoto { color: var(--ink-muted); font-size: 15px; padding: 20px 0; }

.pub-stato { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--ink-mid); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 10px; cursor: default; }
@media screen { .pub-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-stato .svgic, .pub-acquista .svgic, .pub-sfoglia .svgic { width: 16px; height: 16px; flex: none; }
.pub-acquista { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }

.pub-scheda { padding: 28px 24px 64px; max-width: 980px; }
.pub-testa { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.pub-meta { grid-template-columns: repeat(2, 1fr); max-width: 360px; margin: 4px 0 18px; }
.pub-azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pub-corpo { background: var(--white); border: 1px solid var(--rule); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 8px 32px 28px; }
.pub-sez { padding-top: 22px; }
.pub-sez .sez-titolo .svgic { width: 16px; height: 16px; }
.pub-testo { font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 72ch; }
.pub-indice ul, .pub-indice ol { padding-left: 1.3em; }
.pub-lettura { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; margin-top: 22px; }
.pub-ambiti { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.pub-ambiti dt { font-size: 12px; font-weight: 600; color: var(--ink-muted); padding-top: 3px; }
@media screen { .pub-ambiti dt { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-ambiti dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pub-ambiti a.attivita-pill { text-decoration: none; }
.pub-torna { margin: 28px 0 0; font-size: 13px; }
@media screen { .pub-torna { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-torna a { color: var(--ink-muted); }

@media (max-width: 900px) {
  .pub-testa { grid-template-columns: 1fr; }
  .pub-cover-scheda { max-width: 180px; }
  .pub-corpo { padding: 4px 18px 22px; }
  .pub-ambiti { grid-template-columns: 1fr; gap: 4px; }
  .pub-ambiti dd { margin-bottom: 8px; }
}

/* Pagina /pubblicazioni/ a copertine e banner in home (RISPOSTA regia
   banner_home v3, 03/10/2026). */
.pub-presentazione { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 12px 18px; margin-bottom: 28px; max-width: 820px; }
.pub-presentazione p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }
.pub-gruppo { margin-bottom: 36px; }
.pub-gruppo > .sez-titolo + .pub-cop-grid { margin-top: 18px; }
/* Presentazione del gruppo Profilazioni (07/10/2026): testo corrente con
   domande numerate; dall'08/10/2026 dopo le copertine, separato da un filetto. */
.pub-gruppo-intro { max-width: 820px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); }
.pub-gruppo-intro p { margin: 0 0 12px; }
.pub-gruppo-intro ol { margin: 0 0 14px; padding-left: 22px; list-style: decimal; }
.pub-gruppo-intro li { margin-bottom: 5px; }
.pub-gruppo-intro strong, .pub-gruppo-intro em { color: var(--ink); }
.pub-gruppo-intro p:last-child { margin-bottom: 0; }
/* Miniature delle copertine nella hero di /pubblicazioni/ (07/10/2026): a
   destra, dritte e appena sovrapposte (la rotazione a ventaglio della prima
   versione sfocava le scritte delle copertine); sotto 900px in riga sotto
   il sottotitolo. */
.pub-hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.pub-hero-copertine { display: flex; align-items: flex-end; padding: 6px 0 0; }
.pub-hero-cop { display: block; width: 104px; flex-shrink: 0; margin-left: -10px; border-radius: 3px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s, box-shadow .2s; position: relative; }
.pub-hero-cop:first-child { margin-left: 0; }
.pub-hero-cop img { display: block; width: 100%; height: auto; aspect-ratio: 1055 / 1490; object-fit: cover; }
.pub-hero-cop:hover, .pub-hero-cop:focus-visible { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.45); z-index: 2; }
@media (max-width: 900px) {
  .pub-hero-griglia { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pub-hero-copertine { padding: 0; }
  .pub-hero-cop { width: 58px; margin-left: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
}
/* /pubblicazioni/ a due schede, Collana e Profilazioni (08/10/2026): due voci
   fisse affiancate, mai a scorrimento; sotto 600px una sopra l'altra. */
.pub-schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 28px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--navbar-h, 123px) + 12px); }
.pub-scheda { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 13px; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--ink-muted); }
.pub-scheda:hover { background: var(--surface); }
.pub-scheda-titolo { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink-mid); }
.pub-scheda-n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
@media screen { .pub-scheda-n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-scheda-breve { font-size: 13px; }
@media screen { .pub-scheda-breve { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-scheda.is-attiva { border-bottom-color: var(--blue); }
.pub-scheda.is-attiva .pub-scheda-titolo { color: var(--blue); }
@media (max-width: 600px) {
  .pub-schede { grid-template-columns: minmax(0, 1fr); }
  .pub-scheda { border-bottom-width: 1px; border-left: 3px solid transparent; margin-bottom: 0; }
  .pub-scheda.is-attiva { border-bottom-color: var(--rule); border-left-color: var(--blue); }
}
.pub-cop-bozza { font-size: 11px; font-weight: 700; color: var(--orange-dark); margin: -4px 0 6px; }
@media screen { .pub-cop-bozza { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-cop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 24px; }
.pub-cop-card { display: flex; flex-direction: column; min-width: 0; }
.pub-cop-card .pub-cover { margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.pub-cop-card a.pub-cover:hover { box-shadow: var(--shadow-md); }
.pub-cop-titolo { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--blue); margin: 0 0 4px; }
.pub-cop-area { font-size: 12px; font-weight: 600; color: var(--text-category); margin-bottom: 6px; }
@media screen { .pub-cop-area { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-cop-scheda { font-size: 13px; color: var(--ink-muted); margin-bottom: 10px; }
@media screen { .pub-cop-scheda { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-cop-scheda:hover { color: var(--blue); }
.pub-cop-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pub-cop-azioni .pub-stato { font-size: 10px; padding: 5px 8px; }
@media screen { .pub-cop-azioni .pub-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* «Salva nella mia Accademia» dentro la colonna della copertina: va a capo
   invece di sbordare (a 1440 usciva dalla colonna, sul telefono faceva
   scorrere la pagina di lato) — 08/10/2026. */
.pub-cop-azioni .pub-salva-form { max-width: 100%; }
.pub-cop-azioni .pub-salva { max-width: 100%; white-space: normal; text-align: left; }

.pub-banner-img { display: block; max-width: 100%; height: auto; }
.aside-pubblicazioni { display: block; line-height: 0; }
.aside-pubblicazioni:hover { border-color: var(--blue); }
.pub-fascia-sez { padding-top: 0; }
.pub-fascia { display: block; max-width: 600px; margin: 0 auto; line-height: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.pub-fascia:hover { box-shadow: var(--shadow-md); }

@media (max-width: 520px) {
  .pub-cop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
}

/* ── LETTORE FLIPBOOK (fase 5, 03/10/2026) — partials/flipbook-viewer.php ──
   Stampa vuota sulla pagina del lettore e niente selezione del testo: solo
   dissuasori. La protezione è la filigrana con il nome del lettore. */
@media print { body.pub-lettore { display: none !important; } }
.pub-lettura-pagina { padding: 18px 24px 48px; }
.fb-lettore { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fb-lettore.fb-pieno { border: 0; border-radius: 0; background: #2b2f38; display: flex; flex-direction: column; height: 100vh; }
.fb-barra { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.fb-pieno .fb-barra { background: #1f2229; border-color: #3a3f4b; }
.fb-pieno .fb-titolo, .fb-pieno .fb-torna, .fb-pieno .fb-di { color: #e8e9ec; }
.fb-torna { font-size: 13px; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
@media screen { .fb-torna { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-torna:hover { color: var(--blue); }
.fb-titolo { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--blue); flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-comandi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.fb-btn.fb-testo { font-size: 13px; font-weight: 600; }
@media screen { .fb-btn.fb-testo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-btn .svgic { width: 15px; height: 15px; }
.fb-lettore button.fb-btn, .fb-lettore button.fb-btn:focus { background: var(--white); color: var(--ink); }
.fb-lettore button.fb-btn:hover:not(:disabled), .fb-lettore button.fb-btn:focus-visible { background: var(--white); border-color: var(--blue); color: var(--blue); outline: none; box-shadow: 0 0 0 2px var(--blue-lt); }
.fb-lettore button.fb-mini, .fb-lettore button.fb-mini:hover, .fb-lettore button.fb-mini:focus { background: transparent; color: var(--ink-muted); }
.fb-btn:disabled { opacity: .4; cursor: default; }
.fb-lettore button.fb-btn[aria-pressed="true"], .fb-lettore button.fb-btn[aria-pressed="true"]:hover, .fb-lettore button.fb-btn[aria-pressed="true"]:focus { background: var(--blue); border-color: var(--blue); color: var(--white); }
.fb-pos { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-mid); }
@media screen { .fb-pos { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-vai { width: 62px; min-height: 40px; padding: 0 6px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 14px; text-align: center; }
.fb-corpo { display: flex; align-items: stretch; background: #e9eaec; min-height: 420px; }
.fb-pieno .fb-corpo { flex: 1; background: #2b2f38; min-height: 0; }
.fb-area { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 12px; }
.fb-cornice { margin: 0 auto; max-width: 100%; }
.fb-libro { width: 100%; }
.fb-pagina { background: var(--white); overflow: hidden; }
.fb-pagina img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fb-pagina:not(.pronta) img { visibility: hidden; }
.fb-attesa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-muted); }
@media screen { .fb-attesa { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-pagina.pronta .fb-attesa { display: none; }
.fb-avviso { margin: 12px 0 0; font-size: 13px; color: var(--ink); background: var(--amber-lt); border-radius: var(--radius); padding: 8px 12px; max-width: 640px; }
@media screen { .fb-avviso { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-miniature { width: 168px; flex: none; overflow-y: auto; max-height: calc(100vh - 200px); padding: 12px; background: var(--white); border-right: 1px solid var(--rule); display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; }
.fb-miniature[hidden] { display: none; }
.fb-pieno .fb-miniature { max-height: none; background: #1f2229; border-color: #3a3f4b; }
.fb-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: var(--radius); background: transparent; cursor: pointer; font-size: 11px; color: var(--ink-muted); }
@media screen { .fb-mini { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-mini img { width: 100%; aspect-ratio: 938 / 1323; background: var(--surface); object-fit: contain; pointer-events: none; }
.fb-lettore button.fb-mini.attiva { border-color: var(--orange); color: var(--orange); font-weight: 700; }
.fb-nota { margin: 0; padding: 8px 16px; font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--rule); }
@media screen { .fb-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-pieno .fb-nota { display: none; }
.fb-zoom { position: fixed; inset: 0; z-index: 100000; background: #1b1e25; display: flex; flex-direction: column; }
.fb-zoom[hidden] { display: none; }
.fb-zoom-barra { display: flex; align-items: center; gap: 8px; padding: 10px 16px; justify-content: flex-end; }
.fb-zoom-val { color: #fff; font-size: 13px; min-width: 48px; text-align: center; }
@media screen { .fb-zoom-val { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.fb-zoom-area { flex: 1; overflow: auto; display: flex; gap: 12px; justify-content: safe center; align-items: flex-start; padding: 0 16px 24px; }
.fb-zoom-area img { flex: none; max-width: none; background: #fff; pointer-events: none; }
@media (max-width: 760px) {
  .pub-lettura-pagina { padding: 10px 0 32px; }
  .fb-lettore { border-radius: 0; border-left: 0; border-right: 0; }
  .fb-titolo { flex-basis: 100%; order: -1; }
  .fb-btn.fb-testo span:not(.fb-schermo-ico) { display: none; }
  .fb-corpo { flex-direction: column; }
  .fb-miniature { width: auto; max-height: 180px; grid-auto-flow: column; grid-auto-columns: 90px; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--rule); }
  .fb-area { padding: 10px 6px; }
}

/* Accesso alla lettura (ISTRUZIONE regia accesso_lettura v3, 03/10/2026):
   invito agli abbonati e pagina di chiusura dell'estratto nel lettore. */
.pub-invito-abbonati { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media screen { .pub-invito-abbonati { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-invito-abbonati .svgic { width: 15px; height: 15px; }
.pub-invito-abbonati:hover { color: var(--orange); }
.fb-chiusura { background: var(--surface); }
.fb-chiusura-testo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 12%; text-align: center; }
.fb-chiusura-titolo { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--blue); margin: 0; }
.fb-chiusura-testo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.fb-chiusura-testo a.btn-primary { white-space: normal; line-height: 1.4; }

/* Scheda abbonato (ISTRUZIONE regia testo_pubblicazioni_scheda_abbonato,
   03/10/2026): nota privacy della lettura online e «I tuoi volumi». */
.pub-nota-privacy { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-muted); }
@media screen { .pub-nota-privacy { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-nota-privacy a { color: var(--blue); text-decoration: underline; }
.aside-tuoi-volumi .evid-item .see-all { display: block; margin-top: 4px; font-size: 12px; }
@media screen { .aside-tuoi-volumi .evid-item .see-all { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* ── «La mia scheda» (ISTRUZIONE unica regia area utente, 03/10/2026) ──
   page-scheda-abbonato.php + assets/js/scheda.js. Componenti e colori del tema. */
.scheda-testa { padding: 24px 24px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.scheda-persona { display: flex; align-items: center; gap: 16px; }
.scheda-etichetta { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--blue); background: var(--blue-lt); border-radius: 999px; padding: 5px 12px; }
@media screen { .scheda-etichetta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-corpo > * + * { margin-top: 18px; }
#profilo, #notifiche, #archivio, #pubblicazioni, #seguiti, #preferenze, #password, #assistenza, #preferenze-aree, #preferenze-percorsi { scroll-margin-top: calc(var(--navbar-h, 123px) + var(--scheda-tab-h, 48px) + 16px); }
.scheda-profilo { background: var(--blue); color: var(--white); border-radius: var(--radius-lg); padding: 16px 22px; }
.scheda-profilo .sp-k { font-size: 11px; color: rgba(255,255,255,.6); }
@media screen { .scheda-profilo .sp-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-etichetta { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-top: 2px; }
.scheda-profilo .sp-righe { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: rgba(255,255,255,.88); }
@media screen { .scheda-profilo .sp-righe { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-righe li { display: inline-flex; align-items: center; gap: 6px; }
.scheda-profilo .sp-righe .svgic { width: 14px; height: 14px; }
.scheda-h2 { font-family: var(--serif); font-size: 16px; color: var(--blue); margin: 0 0 10px; }
.scheda-riga { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.scheda-riga p { font-size: 13px; color: var(--ink-muted); margin: 0; max-width: 460px; line-height: 1.55; }
@media screen { .scheda-riga p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-fisa { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.scheda-fisa > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 52px; }
.scheda-fisa > summary::-webkit-details-marker { display: none; }
.scheda-fisa > summary:hover .sf-titolo, .scheda-fisa > summary:focus-visible .sf-titolo { color: var(--orange); }
.scheda-fisa > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-lg); }
.sf-titolo { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--blue); }
.sf-sintesi { font-size: 12.5px; color: var(--ink-muted); flex: 1; }
@media screen { .sf-sintesi { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sf-chevron { width: 9px; height: 9px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .18s ease; margin-right: 4px; flex: none; }
.scheda-fisa[open] > summary .sf-chevron { transform: rotate(-135deg); }
.scheda-fisa[open] > summary { border-bottom: 1px solid var(--rule); }
.sf-corpo { padding: 16px 18px 20px; animation: sf-apri .18s ease; }
@keyframes sf-apri { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf-corpo { animation: none; } .sf-chevron { transition: none; } }
.sf-nota { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 12px; line-height: 1.55; }
@media screen { .sf-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sf-sotto + .sf-sotto { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.sf-sotto h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sf-sotto-sintesi { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
@media screen { .sf-sotto-sintesi { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-aiuto .evid-item .see-all, .aside-tuoi-volumi .evid-item .see-all { display: block; margin-top: 4px; font-size: 12px; }
@media screen { .aside-aiuto .evid-item .see-all, .aside-tuoi-volumi .evid-item .see-all { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (min-width: 901px) {
  .scheda-aside { position: sticky; top: calc(var(--navbar-h, 123px) + var(--scheda-tab-h, 48px) + 16px); align-self: start; }
  .scheda-aside.is-tall { position: static; }
}
.pub-autore { margin: -4px 0 14px; }

/* «I tuoi percorsi» compatto (regia, 03/10/2026) */
.aside-tuoi-percorsi .atp-elenco { list-style: none; margin: 0; padding: 8px 14px 4px; }
.aside-tuoi-percorsi .atp-elenco li { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 1.35; }
@media screen { .aside-tuoi-percorsi .atp-elenco li { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-tuoi-percorsi .atp-elenco li:last-child { border-bottom: 0; }
.aside-tuoi-percorsi .atp-elenco a { color: var(--ink); font-weight: 600; text-decoration: none; }
.aside-tuoi-percorsi .atp-elenco a:hover { color: var(--orange); }
.aside-tuoi-percorsi .atp-invito { margin: 0; padding: 10px 14px 2px; font-size: 13px; color: var(--ink-mid); line-height: 1.5; }
@media screen { .aside-tuoi-percorsi .atp-invito { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.aside-tuoi-percorsi .atp-piede { padding: 6px 14px 12px; text-align: right; }

/* ── HOME VISITATORE v2: barra di menu e hero (ISTRUZIONE home v2, A1-A2, 04/10/2026) ──
   Barra del visitatore (header.php, solo non loggati, tutte le pagine): fondo grigio chiaro,
   voci in grassetto come linguette separate, voce attiva sottolineata in arancio, lente a
   destra. Sotto i 900px la riga resta orizzontale (3 voci + lente ci stanno a 390px); se non
   bastasse scorre in orizzontale, senza menu a panino. La tendina delle aree si apre al clic
   (assets/js/navbar-aree.js), una voce per riga. */
.nv-barra { background: #EEF0EC; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.nv-barra-inner { display: flex; align-items: stretch; gap: 4px; min-height: 46px; }
.nv-voce { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; margin: 0; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--blue); background: transparent; border: 0; border-left: 1px solid var(--rule); border-bottom: 3px solid transparent; border-radius: 0; text-decoration: none; white-space: nowrap; cursor: pointer; }
.nv-barra-inner > .nv-aree:first-child .nv-voce { border-left: 0; }
.nv-voce:hover, .nv-voce:focus, .nv-voce:active { background: rgba(255,255,255,.7); color: var(--orange); }
.nv-voce:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.nv-voce.active { color: var(--orange); border-bottom-color: var(--orange); background: var(--white); }
.nv-lente { margin-left: auto; padding: 0 14px; border-right: 0; }
.nv-lente .svgic, .nv-lente svg { width: 18px; height: 18px; }
.nv-aree { position: relative; display: flex; }
.nv-chev { font-size: 12px; transition: transform .15s; }
@media screen { .nv-chev { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nv-aree-btn[aria-expanded="true"] .nv-chev { transform: rotate(180deg); }
.nv-aree-elenco { display: none; position: absolute; left: 0; top: 100%; z-index: 45; min-width: 280px; margin: 0; padding: 6px 0; list-style: none; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--orange); box-shadow: var(--shadow-md); }
.nv-aree.is-open .nv-aree-elenco { display: block; }
.nv-aree-elenco li { margin: 0; }
.nv-aree-elenco a { display: block; padding: 10px 18px; font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nv-aree-elenco a:hover { color: var(--orange); background: var(--surface); }
.nv-aree-elenco a.active { color: var(--orange); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
@media (max-width: 900px) {
  .nv-barra-inner { overflow-x: auto; gap: 0; }
  .nv-barra-inner::-webkit-scrollbar { display: none; }
  .nv-voce { padding: 0 12px; font-size: 14px; min-height: 46px; }
  .nv-aree { position: static; }
  .nv-aree-elenco { left: 0; right: 0; min-width: 0; }
  .nv-aree-elenco a { padding: 13px 24px; font-size: 15px; white-space: normal; border-bottom: 1px solid var(--rule); }
  .nv-barra { position: relative; }
}
@media (max-width: 400px) { .nv-voce { padding: 0 10px; font-size: 13.5px; }
@media screen { .nv-voce { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */ .nv-lente { padding: 0 10px; } }

/* Hero v2: blu #1A3A5C, testo chiaro, ~450px a 1440. Titolo in maiuscolo (CSS), kicker
   «Accademia» non più arancione. Ricerca su una riga larga, tre esempi cliccabili. A destra il
   box «Affidabilità» (stesso stile scuro di prima, senza la scala dei gradi) e la paternità. */
.hero.hero-v2 { padding: 40px 24px 44px; }
.hero-v2-inner { grid-template-columns: 1fr 400px; gap: 48px; align-items: center; }
.hero-v2 .hero-kicker { color: rgba(255,255,255,.6); margin-bottom: 12px; }
.hero-v2-titolo { font-size: 24px; line-height: 1.32; margin-bottom: 14px; }
.hero-v2-titolo-2 { display: block; font-weight: 400; color: rgba(255,255,255,.82); }
.hero-v2 .hero-v2-sub { font-size: 15.5px; line-height: 1.55; margin-bottom: 10px; max-width: none; color: rgba(255,255,255,.78); font-weight: 400; }
.hero-v2-invito { font-size: 14px; line-height: 1.5; color: var(--rust-on-dark); margin: 0 0 18px; }
.hero-v2 .hero-v2-ricerca { max-width: none; }
.hero-v2-esempi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.6); }
@media screen { .hero-v2-esempi { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hero-v2-esempi a { color: #fff; padding: 3px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; text-decoration: none; }
.hero-v2-esempi a:hover { border-color: var(--rust-on-dark); color: var(--rust-on-dark); }
.hero-v2-box p.body { margin-bottom: 12px; }
.hero-v2-metodo { display: inline-block; font-size: 13px; font-weight: 600; color: var(--rust-on-dark); text-decoration: none; }
@media screen { .hero-v2-metodo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.hero-v2-metodo:hover { color: #fff; text-decoration: underline; }
.hero-v2-paternita { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.hero-v2 .hero-v2-cred { padding: 6px 0; border-top: 0; text-decoration: none; }
.hero-v2 a.hero-v2-cred:hover .hero-cred-text strong { color: var(--rust-on-dark); text-decoration: underline; }
@media (max-width: 1100px) { .hero-v2-inner { grid-template-columns: 1fr 340px; gap: 32px; } }
@media (max-width: 900px) {
  .hero.hero-v2 { padding: 28px 16px 32px; }
  .hero-v2-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero-v2-titolo { font-size: 20px; }
}
@media (max-width: 600px) {
  .hero-v2 .hero-v2-ricerca { padding: 6px 6px 6px 12px; }
  .hero-v2 .hero-v2-ricerca .go2 { padding: 10px 14px; }
}
/* Visitatore sotto i 640px: senza la lente (ora nella barra di menu) logo, Accedi e Abbonati
   stanno su una riga; la regola di a capo sopra resta per chi ha fatto l'accesso. */
@media (max-width: 640px) {
  body:not(.logged-in) .navbar-top { flex-wrap: nowrap; gap: 10px; }
  body:not(.logged-in) .nav-tools { width: auto; gap: 8px; }
  body:not(.logged-in) .nav-tools .btn-ghost,
  body:not(.logged-in) .nav-tools .btn-primary { padding: 8px 12px; }
}
@media (max-width: 360px) { body:not(.logged-in) .brand .brand-logo { height: 28px; } }
.hero-v2 p.hero-v2-invito { margin: 0 0 18px; }
.hero-v2 p.hero-v2-sub { margin-bottom: 10px; }
.hero-v2 .hero-v2-ricerca input[type="text"] { background: #fff; border: 0; box-shadow: none; }
.hero.hero-v2 { padding-top: 34px; padding-bottom: 38px; }
@media (max-width: 600px) {
  .hero.hero-v2 { padding: 24px 0 28px; }
  .hero-v2 .at-container { padding: 0 16px; }
  .hero-v2-titolo { font-size: 18px; }
  .hero-v2 .hero-v2-sub { font-size: 14.5px; }
}
/* Paternità: foto e logo affiancati sopra i 900px (nome sopra, ruolo sotto), per tenere la
   colonna destra non più alta di quella sinistra. */
@media (min-width: 901px) {
  .hero-v2-paternita { flex-direction: row; gap: 16px; }
  .hero-v2 .hero-v2-cred { flex: 1; align-items: center; }
  .hero-v2 .hero-v2-cred .hero-cred-text { font-size: 11.5px; }
@media screen { .hero-v2 .hero-v2-cred .hero-cred-text { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
  .hero-v2 .hero-v2-cred .hero-cred-text strong { display: block; }
}
@media (min-width: 901px) { .hero-v2-sep { display: none; } }

/* ── HOME VISITATORE, CORPO v3c (ISTRUZIONE regia, 04/10/2026) ────────────
   Striscia dei numeri · «Una norma, tutto ciò che la riguarda» (linguette,
   assets/js/home-norme.js) · vetrine a tre colonne · aree su una riga. */
.home-numeri { background: var(--blue-lt); border-bottom: 1px solid var(--rule); }
.home-numeri-lista { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 0; list-style: none; }
.home-numeri-lista li { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.home-numeri-n { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--blue); line-height: 1; }
.home-numeri-k { font-size: 13.5px; color: var(--ink-mid); }
@media screen { .home-numeri-k { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 900px) {
  .home-numeri-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 14px 0; }
  .home-numeri-lista li { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .home-numeri-n { font-size: 21px; }
  .home-numeri-k { font-size: 12px; }
@media screen { .home-numeri-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
}
@media (max-width: 600px) { .home-numeri .at-container { padding: 0 16px; } }

#norma-vetrina.sec-48 { padding-top: 40px; padding-bottom: 40px; }
.nv-norma-testa { max-width: 860px; margin-bottom: 18px; }
.nv-norma-testa .section-title { margin: 0 0 10px; }
.nv-norma-lede { font-size: 15px; line-height: 1.6; color: var(--ink-mid); margin: 0 0 8px; }
.nv-norma-istr { font-size: 14px; font-weight: 600; color: var(--blue); margin: 0; }
.nv-norme-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.nv-norme-tabs::-webkit-scrollbar { display: none; }
.nv-norme-tabs[hidden] { display: none; }
.nv-norme-tabs [role="tab"] { flex-shrink: 0; margin: 0 0 -2px; padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap; }
.nv-norme-tabs [role="tab"]:hover, .nv-norme-tabs [role="tab"]:focus { background: var(--surface); color: var(--blue); }
.nv-norme-tabs [role="tab"]:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.nv-norme-tabs [role="tab"][aria-selected="true"] { color: var(--blue); border-bottom-color: var(--orange); background: var(--white); }
.nv-tab-area { font-weight: 400; }
.nv-pannello { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 36px; } /* una colonna dal 06/11/2026: tolti i totali per normativa, la testa sta sopra gli articoli (REGIA 1512, A3) */
.nv-norme:not(.is-js) .nv-pannello + .nv-pannello { margin-top: 16px; }
.nv-norme.is-js .nv-pannello { border-top-left-radius: 0; border-top: 0; }
.nv-pannello[hidden] { display: none; }
.nv-pannello-testa .exdemo-title { margin-bottom: 8px; }
.nv-pannello-testa .exdemo-title a { color: inherit; text-decoration: none; }
.nv-pannello-testa .exdemo-title a:hover { color: var(--orange); }
.nv-date { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 14px; }
.nv-conteggi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nv-conteggio { display: block; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--ink-mid); text-decoration: none; }
@media screen { .nv-conteggio { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nv-conteggio b { display: block; font-family: var(--serif); font-size: 22px; color: var(--blue); line-height: 1.1; }
.nv-conteggio:hover { border-color: var(--orange); color: var(--orange); }
.nv-articoli { list-style: none; margin: 0; padding: 0; }
.nv-articoli .exdemo-artrow { margin: 0; }
.nv-articoli .exdemo-artrow:first-child { padding-top: 0; }
.nv-articoli .exdemo-artnum { text-decoration: none; }
.nv-articoli .exdemo-arttitle a { color: var(--ink); text-decoration: none; }
.nv-articoli a:hover { color: var(--orange); }
a.exdemo-badge { text-decoration: none; }
a.exdemo-badge:hover { border-color: var(--orange); color: var(--orange); }
.nv-dagli { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.6; color: var(--ink-mid); }
@media screen { .nv-dagli { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nv-dagli .k { font-weight: 600; color: var(--ink); margin-right: 4px; }
.nv-dagli a { color: var(--ink-mid); text-decoration: none; }
.nv-dagli a strong { color: var(--blue); }
.nv-dagli a:hover, .nv-dagli a:hover strong { color: var(--orange); }
@media (max-width: 900px) {
  .nv-pannello { grid-template-columns: 1fr; padding: 20px; }
  .nv-conteggi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .nv-conteggio { padding: 8px; font-size: 12px; }
@media screen { .nv-conteggio { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
  .nv-conteggio b { font-size: 18px; }
}
@media (max-width: 600px) {
  #norma-vetrina.sec-48 { padding: 32px 16px; }
  .nv-pannello { padding: 16px; }
  .nv-conteggi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-articoli .exdemo-artrow:nth-child(n+4) { display: none; } /* telefono: massimo tre articoli */
  .nv-articoli .exdemo-artnum { width: 64px; }
}

/* Vetrine: tre colonne uguali e della stessa altezza. */
#vetrine.sec-48 { padding-top: 40px; padding-bottom: 40px; }
.vetrine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.vetrina { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px; min-width: 0; }
.vetrina-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--orange); }
.vetrina-tit { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--blue); margin: 0; }
.vetrina-corpo { flex: 1; display: flex; flex-direction: column; }
.vetrina-orientamenti .orient-card { padding: 10px 0; }
.vetrina-percorso { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.vetrina-percorso:last-child { border-bottom: 0; }
.vetrina-percorso-nome { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.vetrina-percorso-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }
@media screen { .vetrina-percorso-desc { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.vetrina-percorso:hover .vetrina-percorso-nome { color: var(--orange); }
.vetrina-pubblicazioni .vetrina-corpo { justify-content: center; gap: 16px; padding-top: 12px; }
.vetrina-pub-banner { display: block; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.vetrina-pub-banner img { display: block; width: 100%; height: auto; }
.vetrina-pub-btn { align-self: center; }
@media (max-width: 900px) {
  .vetrine-grid { grid-template-columns: 1fr; }
  .vetrina-percorsi { order: 1; } .vetrina-orientamenti { order: 2; } .vetrina-pubblicazioni { order: 3; }
}
@media (max-width: 600px) { #vetrine.sec-48 { padding: 32px 16px; } .vetrina { padding: 16px; } }

/* Aree tematiche: cinque schede su una riga sopra i 1100 px; al telefono
   elenco compatto (nome + conteggi). */
#aree.sec-48 { padding-top: 40px; padding-bottom: 40px; }
.aree-riga.mockup-area-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aree-riga .mockup-area-card { padding: 16px; gap: 8px; }
.aree-riga .mockup-area-card h4 { font-size: 15px; line-height: 1.3; }
.aree-riga .mockup-area-card p { font-size: 12.3px; }
@media screen { .aree-riga .mockup-area-card p { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
#aree .aree-sub { margin: 0 0 20px; }
@media (max-width: 1100px) { .aree-riga.mockup-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  #aree.sec-48 { padding: 32px 16px; }
  .aree-riga.mockup-area-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
  .aree-riga .mockup-area-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .aree-riga .mockup-area-card:last-child { border-bottom: 0; }
  .aree-riga .mockup-area-card:hover { transform: none; box-shadow: none; }
  .aree-riga .mockup-area-card p { display: none; }
  .aree-riga .mockup-area-card .cnt { flex-basis: 100%; margin: 0; padding: 0 0 0 30px; }
}
/* v3c, ritocchi dopo la prima misura: le regole generali .at ul / .at h2 / .at p
   (margini e corpo azzerati) prevalevano su quelle sopra; qui con .at davanti. */
.at .home-numeri-lista { padding: 16px 0; }
@media (max-width: 900px) { .at .home-numeri-lista { padding: 12px 0; } }
.at .nv-norma-testa h2.section-title { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
.at .nv-norma-testa { max-width: 1020px; margin-bottom: 16px; }
.at p.nv-norma-lede { margin: 0 0 6px; }
#norma-vetrina.sec-48, #vetrine.sec-48, #aree.sec-48 { padding-top: 32px; padding-bottom: 32px; }
.nv-articoli .exdemo-artrow { padding: 9px 0; }
.nv-pannello { padding: 20px 26px; }
.at .nv-dagli { margin-top: 4px; padding-top: 10px; }
.at h2.vetrina-tit { font-size: 18px; line-height: 1.3; }
.vetrina-tutti { display: block; margin-top: auto; padding-top: 10px; }
.vetrina-percorso { padding: 8px 0; }
.vetrina-percorso-desc { font-size: 12.3px; line-height: 1.4; }
@media screen { .vetrina-percorso-desc { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.vetrina-pubblicazioni .vetrina-corpo { justify-content: flex-start; }
@media (max-width: 600px) { .at .nv-norma-testa h2.section-title { font-size: 21px; } }
@media (max-width: 600px) {
  #norma-vetrina.sec-48, #vetrine.sec-48, #aree.sec-48 { padding-left: 0; padding-right: 0; }
  #norma-vetrina .at-container, #vetrine .at-container, #aree .at-container { padding: 0 16px; }
}

/* ── HOME VISITATORE v5 (ISTRUZIONE regia + risposta al parere, 04/10/2026) ── */
/* Menu dei loggati: «Sicurezza lavori» nella riga orizzontale, nome pieno nella tendina del telefono. */
.nav-nome-tendina { display: none; }
@media (max-width: 900px) { .nav-nome-riga { display: none; } .nav-nome-tendina { display: inline; } }

/* Hero: titolo in tre livelli, nessun maiuscolo continuo. */
.at .hero-v5-h1 { font-family: var(--serif); font-size: 46px; font-weight: 700; line-height: 1.05; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.hero-v5-acc { color: #E9A57C; } /* --rust-on-dark: 5,6:1 sul blu */
.hero-v5-tj { color: #fff; font-size: .6em; } /* 05/10/2026: marchio, 40% più piccolo */
.at .hero-v5-l2 { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.3; color: #fff; margin: 0 0 4px; }
.at .hero-v5-l3 { font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.4; color: rgba(255,255,255,.82); margin: 0 0 14px; }
@media (max-width: 600px) {
  .at .hero-v5-h1 { font-size: 36px; }
  .at .hero-v5-l2 { font-size: 19px; }
  .at .hero-v5-l3 { font-size: 15.5px; }
}

/* Barra di ancore: scroll-margin per le due sezioni nuove (le altre già sopra). */
#norma-vetrina, #vetrine, #su-misura, #ultimi-inserimenti { scroll-margin-top: 180px; }
.page-stick .anchors { overflow-x: auto; scrollbar-width: none; }
.page-stick .anchors::-webkit-scrollbar { display: none; }
.page-stick a.anchor { white-space: nowrap; }

/* Ultimi inserimenti per tipo di contenuto. */
#ultimi-inserimenti { padding: 28px 24px; }
.ui-testa { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.at h2.ui-tit { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--blue); margin: 0; }
.ui-nota { font-size: 12.5px; color: var(--ink-muted); }
.at .ui-elenco { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 2px 18px; }
.ui-elenco li { display: grid; grid-template-columns: 92px 110px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ui-elenco li:last-child { border-bottom: 0; }
.ui-data { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
@media screen { .ui-data { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ui-tipo { font-size: 11.5px; font-weight: 600; color: var(--text-category); }
@media screen { .ui-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.ui-titolo { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; }
.ui-titolo:hover, .ui-anteprima:hover { color: var(--orange); }
.ui-anteprima { font-size: 12.5px; font-weight: 600; color: var(--orange); text-decoration: none; white-space: nowrap; }
@media (max-width: 760px) {
  .ui-elenco li { grid-template-columns: auto 1fr; gap: 2px 10px; }
  .ui-titolo { grid-column: 1 / -1; }
  .ui-anteprima { grid-column: 1 / -1; }
}
@media (max-width: 600px) { #ultimi-inserimenti { padding: 24px 0; } #ultimi-inserimenti .at-container { padding: 0 16px; } .at .ui-elenco { padding: 0 14px; } }

/* Blocco normative: occhiello e frase di chiusura. */
.nv-norma-testa .pres-eyebrow { display: block; margin-bottom: 6px; }
.at p.nv-chiusura { margin: 14px 0 0; font-size: 13.5px; font-style: italic; color: var(--ink-mid); }
@media screen { .at p.nv-chiusura { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Tre gioielli descritti: titolo, elemento visivo, descrizione, pulsante. */
.gioielli .vetrina { gap: 14px; padding: 20px 22px; }
.at .gioielli h3.vetrina-tit { font-size: 19px; line-height: 1.3; padding-bottom: 10px; border-bottom: 2px solid var(--orange); }
.at .gioiello-stati { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.gioiello-stati li { display: flex; }
.at .gioiello-sequenza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; counter-reset: none; }
.gioiello-sequenza li { display: flex; align-items: center; }
.gioiello-sequenza li span { font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-lt); border-radius: 999px; padding: 4px 10px; }
@media screen { .gioiello-sequenza li span { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.gioiello-sequenza li + li::before { content: '\2192'; margin-right: 6px; color: var(--ink-muted); }
.at p.gioiello-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); margin: 0; }
@media screen { .at p.gioiello-desc { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.gioiello-btn { align-self: flex-start; margin-top: auto; }
.gioielli .vetrina-pub-banner { border-radius: var(--radius); }
.at .gioiello-sequenza, .at .gioiello-stati { margin: 0; padding: 0; list-style: none; }
/* Sequenza dei percorsi più compatta; freccia dopo la pillola (se va a capo resta in fondo alla riga). */
.at .gioiello-sequenza { gap: 4px; }
.gioiello-sequenza li span { font-size: 11.5px; padding: 3px 8px; }
@media screen { .gioiello-sequenza li span { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.gioiello-sequenza li + li::before { content: none; }
.gioiello-sequenza li:not(:last-child)::after { content: '\2192'; margin-left: 4px; color: var(--ink-muted); font-size: 12px; }
@media screen { .gioiello-sequenza li:not(:last-child)::after { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.gioielli .vetrina { gap: 12px; padding: 18px 20px; }
.gioiello-sequenza li span { font-size: 11px; padding: 3px 7px; }
@media screen { .gioiello-sequenza li span { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.gioiello-sequenza li:not(:last-child)::after { margin-left: 3px; }
.at .gioiello-sequenza { gap: 3px; }

/* Etichette dei menu (Romolo, 04/10/2026): «Menu principale:» nella barra del visitatore,
   «Menu di pagina:» nella barra di ancore della home; stesso stile dell'etichetta «Tematiche:»
   del menu dei loggati. */
.nv-etichetta, .anchors-etichetta { flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
@media screen { .nv-etichetta, .anchors-etichetta { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nv-etichetta { padding-right: 14px; }
.nv-barra-inner > .nv-etichetta + .nv-aree .nv-voce { border-left: 0; }
.page-stick .anchors { align-items: center; }
.anchors-etichetta { padding: 0 10px 0 0; }
@media (max-width: 600px) { .nv-etichetta { display: none; } }
/* Telefono: con le voci per esteso la barra del visitatore scorre in orizzontale; la lente resta
   sempre visibile, ferma sul bordo destro. */
@media (max-width: 900px) {
  .nv-lente { position: sticky; right: 0; z-index: 1; background: #EEF0EC; border-left: 1px solid var(--rule); box-shadow: -8px 0 8px -6px rgba(0,0,0,.12); }
  .nv-lente.active { background: var(--white); }
}
@media (max-width: 900px) { .nv-barra-inner { padding-right: 0; } }
#ultimi-inserimenti { scroll-margin-top: 180px; } /* ritorno dalle schede (?da=inserimenti) sotto le barre fisse */

/* ── HOME ABBONATO v1 (ISTRUZIONE regia, 04/10/2026) ──────────────────────
   Menu dei loggati: etichetta «Menu / Aree tematiche» su due righe; Percorsi e
   Orientamenti tolti dalla riga delle aree (sono nella riga alta). Sotto i 900 px,
   dove la riga alta è nascosta, restano nella tendina del menu. */
.navbar-areas-label { line-height: 1.3; }
@media (min-width: 901px) { .navbar-areas .nav-destra { display: none; } }
@media (min-width: 901px) and (max-width: 1189px) { .navbar-areas-label { display: inline; } }

/* Home abbonato v1: hero a due colonne (ricerca compatta | card Radar). */
.search-hero-v1 .at-container.search-hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.search-hero-v1 .type-pills { flex-wrap: wrap; row-gap: 8px; }
.radar-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); box-shadow: var(--shadow-md); }
.radar-card-banner { display: block; }
.radar-card-banner img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.radar-card-testo { padding: 12px 16px 14px; }
.radar-card-k { font-size: 11px; font-weight: 700; color: var(--ink-muted); }
@media screen { .radar-card-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.radar-card-tit { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--blue); text-decoration: none; }
.radar-card-tit:hover { color: var(--orange); }
.radar-card-tutto { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; }
@media screen { .radar-card-tutto { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.radar-card-tutto:hover { color: var(--orange-dark); }
@media (max-width: 1100px) { .search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } }
@media (max-width: 900px) { .search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: 1fr; gap: 20px; } }

/* Corpo: niente margini in linea; fascia Guida chiudibile. */
.home-abb-corpo { margin-top: 24px; margin-bottom: 64px; }
.guida-fascia { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 48px 12px 16px; margin-bottom: 16px; background: var(--blue-lt); border-left: 3px solid var(--blue); border-radius: var(--radius); }
.guida-fascia-tit { font-weight: 700; font-size: 14px; color: var(--blue); }
.at .guida-fascia-punti { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; color: var(--ink-mid); flex: 1 1 100%; }
@media screen { .at .guida-fascia-punti { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.guida-fascia-punti li { position: relative; padding-left: 12px; }
.guida-fascia-punti li::before { content: '·'; position: absolute; left: 2px; color: var(--blue); font-weight: 700; }
.guida-fascia-link { font-size: 13px; }
@media screen { .guida-fascia-link { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.guida-fascia-chiudi { position: absolute; top: 6px; right: 6px; margin: 0; }
.guida-fascia-chiudi button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 22px; line-height: 32px; cursor: pointer; }
.guida-fascia-chiudi button:hover, .guida-fascia-chiudi button:focus { background: var(--white); color: var(--ink); }
.feed-vedi-tutti { padding: 14px 18px 0; }

/* Colonna destra a banner (home abbonato e «La mia scheda»). */
.aside-banner { display: block; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); transition: box-shadow .15s; }
.aside-banner:hover { box-shadow: var(--shadow-md); }
.aside-banner img { display: block; width: 100%; height: auto; }
.atp-scegli { text-align: right; margin-top: -6px; }
.atp-scegli .see-all { font-size: 13px; white-space: normal; }
@media screen { .atp-scegli .see-all { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
/* Riga di raccordo con l'Atlante Tecnojus nella pagina Orientamenti (home abbonato v1, punto 5). */
.at p.tem-atlante { margin: -4px 0 10px; font-size: 13px; color: var(--ink-muted); }
@media screen { .at p.tem-atlante { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tem-atlante a { color: var(--blue); text-decoration: underline; }
.tem-atlante a:hover { color: var(--orange); }

/* ── HOME ABBONATO v2 + HUB AREE (ISTRUZIONE regia, 04/10/2026) ───────────
   Box Radar compatto: banner largo circa 360 px (2:1, circa 180 px di altezza)
   e una sola riga sotto; nella home la card è alta quanto il blocco di ricerca. */
.search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
.radar-card { width: 100%; max-width: 360px; justify-self: end; box-shadow: none; border-radius: var(--radius); }
.radar-card-banner img { aspect-ratio: 2 / 1; }
.radar-card-riga { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; }
.radar-card-tit { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--blue); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media screen { .radar-card-tit { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.radar-card-tit .radar-card-k { display: inline; font-size: 10.5px; letter-spacing: .06em; }
@media screen { .radar-card-tit .radar-card-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.radar-card-tutto { flex-shrink: 0; margin: 0; font-size: 12.5px; }
.radar-card--hub .radar-card-riga { justify-content: flex-end; padding: 6px 12px; }
/* Hub delle aree: testo e ricerca a sinistra, Radar a destra. */
.area-hero-radar .hub-hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: center; }
.area-hero-radar .radar-card { max-width: 300px; }
@media (max-width: 1100px) { .search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } }
@media (max-width: 900px) {
  .search-hero-v1 .at-container.search-hero-griglia, .area-hero-radar .hub-hero-griglia { grid-template-columns: 1fr; gap: 16px; }
  .radar-card, .area-hero-radar .radar-card { max-width: none; justify-self: stretch; }
}
/* Misurato (04/10/2026): a 360 px la card (217 px) superava il blocco di ricerca
   (176 px) e lasciava vuoto nella hero; a 300 px è alta circa quanto la ricerca
   e allineata alla colonna destra (300 px). Nelle aree 240 px: la hero non si allunga. */
.search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 300px; }
.search-hero-v1 .radar-card { max-width: 300px; }
.area-hero-radar .hub-hero-griglia { grid-template-columns: minmax(0, 1fr) 240px; }
.area-hero-radar .radar-card { max-width: 240px; }
@media (max-width: 900px) {
  .search-hero-v1 .radar-card, .area-hero-radar .radar-card { max-width: none; }
  /* 08/10/2026: le due regole qui sopra (240/300 px, fuori da media query) annullavano
     la colonna unica sotto i 900 px: al telefono il Radar copriva il titolo dell'area. */
  .search-hero-v1 .at-container.search-hero-griglia, .area-hero-radar .hub-hero-griglia { grid-template-columns: 1fr; gap: 16px; }
}
/* Rivisto (04/10/2026): a 300 px la riga «Attualità legislativa · titolo» troncava il
   titolo a una lettera. Home: card 360 px come da istruzione e banner ritagliato a
   2,4:1 (circa 150 px di altezza) perché la card resti alta quanto la ricerca. */
.search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 360px; }
.search-hero-v1 .radar-card { max-width: 360px; }
.search-hero-v1 .radar-card-banner img { aspect-ratio: 2.4 / 1; object-fit: cover; object-position: center; }
@media (max-width: 1100px) { .search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 900px) { .search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: 1fr; } .search-hero-v1 .radar-card-banner img { aspect-ratio: 2 / 1; } }
/* Colonna a banner anche negli elenchi per tipologia dentro l'area e negli Atti di autorità (04/10/2026). */
.ricerca-grid > aside > .aside-banner, .ricerca-grid > aside > .aside-tuoi-percorsi, .ricerca-grid > aside > .atp-scegli { margin-bottom: 16px; }
.ricerca-grid > aside > .atp-scegli { margin-top: -6px; }

/* ── Proponi un tema (05/10/2026) ── */
.rc-avvertenza { font-size: 13.5px; color: var(--ink-mid); padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--orange); border-radius: var(--radius); }
@media screen { .rc-avvertenza { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }
.rc-scelte { flex-direction: column; gap: 8px; }
.rc-intro, .rc-vuoto { font-size: 14px; color: var(--ink-muted); margin: 0 0 16px; }
.rc-elenco { list-style: none; margin: 0; padding: 0; }
.rc-voce { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rc-voce:first-child { padding-top: 0; }
.rc-voce-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.rc-titolo { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--blue); text-decoration: none; }
a.rc-titolo:hover { color: var(--orange); }
.rc-meta { font-size: 12.5px; color: var(--ink-muted); margin: 4px 0 8px; }
.rc-nota { font-size: 13.5px; color: var(--ink); margin: 0 0 8px; padding: 8px 12px; background: var(--surface); border-radius: var(--radius); }
@media screen { .rc-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-stato { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #FBF1E3; color: #8A4B08; }
@media screen { .rc-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-stato--pubblicata { background: #E6F4EA; color: #1E6B34; }
.rc-stato--non_accolta { background: #EEF0EA; color: var(--ink-muted); }
.rc-stato--lavorazione { background: #E7EEF7; color: var(--blue); }
.rc-tuo { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }
.rc-interessa { margin: 0; }
.rc-interessa-btn { min-height: 40px; padding: 7px 14px; border: 1px solid var(--orange); border-radius: 20px; background: var(--white); color: var(--orange); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media screen { .rc-interessa-btn { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-interessa-btn:hover, .rc-interessa-btn:focus-visible { background: var(--orange); color: #fff; }
.rc-interessa-btn.is-attivo { background: #E6F4EA; border-color: #9CCBAA; color: #1E6B34; }
.rc-invito { font-size: 14px; color: var(--ink-mid); margin: 18px 0 0; padding: 12px 16px; background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--radius); }
.rc-invito a { color: var(--orange); font-weight: 600; }

/* Fascia «Proponi un tema» in home pubblica, riga nei piani, riquadro in home abbonato (05/10/2026) */
.rc-fascia { display: flex; gap: 28px; align-items: flex-start; max-width: 980px; margin: 0 auto; padding: 30px 34px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--orange); border-radius: var(--radius-lg, 10px); }
.rc-fascia-ic { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--orange); }
.rc-fascia-ic svg { width: 28px; height: 28px; }
.rc-fascia-corpo { flex: 1 1 auto; min-width: 0; }
.rc-fascia .rc-fascia-tit { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--blue); line-height: 1.3; margin: 0 0 10px; }
.rc-fascia .rc-fascia-testo { font-size: 15px; line-height: 1.65; color: var(--ink-mid); margin: 0 0 20px; max-width: 720px; }
.rc-passi { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.rc-passi li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rc-passo-n { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
@media screen { .rc-passo-n { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-fascia-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.rc-fascia-conta { font-size: 13.5px; color: var(--ink-muted); }
@media screen { .rc-fascia-conta { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-fascia-conta strong { color: var(--blue); }
.piano-plus { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.piano-plus svg { width: 14px; height: 14px; color: var(--orange); flex: 0 0 auto; }
.rc-box-home { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.rc-box-home:hover, .rc-box-home:focus-visible { border-color: var(--orange); }
.rc-box-ic { color: var(--orange); flex: 0 0 auto; display: inline-flex; }
.rc-box-ic svg { width: 22px; height: 22px; }
.rc-box-testo { flex: 1 1 auto; font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
@media screen { .rc-box-testo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-box-testo strong { display: block; font-size: 14px; color: var(--blue); }
.rc-box-freccia { color: var(--orange); font-weight: 700; }
@media (max-width: 700px) {
  .rc-fascia { flex-direction: column; gap: 14px; padding: 22px 18px; }
  .rc-fascia-ic { width: 44px; height: 44px; }
  .rc-fascia .rc-fascia-tit { font-size: 20px; }
  .rc-passi { flex-direction: column; gap: 10px; }
}

/* Nota di trasparenza sull'uso dell'intelligenza artificiale in fondo alle
   schede redazionali (06/10/2026) — stesso registro discreto di .fonti-discreto,
   separata da un filetto; resta in stampa. */
.nota-ia { margin: var(--sp-4, 24px) 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.55; color: var(--ink-muted); }
@media screen { .nota-ia { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nota-ia a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--border-strong); white-space: nowrap; }
.nota-ia a:hover { color: var(--blue); }
.pub-corpo .nota-ia { margin: var(--sp-5, 32px) 0 var(--sp-3, 16px); }

/* ── Notifiche (06/10/2026): numerino sulla campanella dell'intestazione ed
   elenco nella sezione #notifiche di «La mia scheda». ── */
.icon-btn.campanella { position: relative; }
.campanella-n { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--white); }
@media screen { .campanella-n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.notif-elenco { list-style: none; margin: 0; padding: 0; }
.notif-elenco .notif { border-bottom: 1px solid var(--rule); }
.notif-elenco .notif:last-child { border-bottom: none; }
.notif-elenco .notif a { display: block; padding: 11px 0 11px 12px; border-left: 3px solid transparent; text-decoration: none; color: inherit; }
.notif-elenco .notif.is-nuova a { border-left-color: var(--orange); }
.notif-elenco .notif a:hover .notif-titolo { color: var(--orange); }
.notif-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 11px; color: var(--ink-muted); }
@media screen { .notif-testa { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.notif-genere { font-weight: 700; }
.notif-nuova { color: var(--orange); font-weight: 700; }
.notif-data { margin-left: auto; text-transform: none; letter-spacing: 0; }
.notif-titolo { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.notif-dettaglio { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
@media screen { .notif-dettaglio { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.notif-vuoto { margin: 0; font-size: 13.5px; color: var(--ink-muted); }
@media screen { .notif-vuoto { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.notif-nota { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
@media screen { .notif-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.notif-altre { border-top: 1px solid var(--rule); }
.notif-altre > summary { cursor: pointer; padding: 10px 0 2px; font-size: 13px; font-weight: 600; color: var(--orange); }
@media screen { .notif-altre > summary { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Riga alta dei loggati: la voce della pagina in cui ci si trova resta
   evidenziata come al passaggio del mouse (Romolo, 06/10/2026: «La mia scheda»
   selezionata quando si è nella scheda); al telefono la riga non c'è e si
   evidenzia il nome dell'utente, che porta alla stessa pagina. */
.topbar-info a.active, .topbar-info a[aria-current="page"] { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .user-chip.active { border-color: var(--orange); color: var(--orange); } }

/* Pubblicazioni salvate (06/10/2026): pulsante nel catalogo/scheda volume ed
   elenco in «La mia scheda». */
.pub-salva-form { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.pub-salva .svgic { width: 15px; height: 15px; }
.pub-salvata { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--green, #2e7d4f); }
@media screen { .pub-salvata { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-salvata .svgic { width: 14px; height: 14px; }
.pub-salva-rimuovi { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--ink-muted); text-decoration: underline; cursor: pointer; }
.pub-salva-rimuovi:hover { color: var(--orange); }
.pub-salvate { list-style: none; margin: 0; padding: 0; }
.pub-salvata-riga { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.pub-salvata-cop { flex: 0 0 64px; width: 64px; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 4px; overflow: hidden; }
.pub-salvata-cop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-salvata-info { flex: 1; min-width: 0; }
.pub-salvata-tipo { display: block; font-size: 11px; font-weight: 700; color: var(--ink-muted); }
@media screen { .pub-salvata-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-salvata-titolo { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; }
.pub-salvata-titolo:hover { color: var(--orange); }
.pub-salvata-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.pub-salvata-azioni .pub-sfoglia { display: inline-flex; align-items: center; gap: 6px; }
.pub-salvata-azioni .pub-sfoglia .svgic { width: 14px; height: 14px; }
.pub-salvate-vuoto { margin: 0; font-size: 13.5px; color: var(--ink-mid); }
@media screen { .pub-salvate-vuoto { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* «La mia Accademia» su misura (06/10/2026): pulsanti «Salva nella mia
   Accademia» e «Segui» (accademia_salva_html()), «Il mio archivio», «Cosa
   seguo», primo accesso guidato (partials/benvenuto.php). */
.salva-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.salva-form.is-attesa { opacity: .55; pointer-events: none; }
.salva-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.salva-btn:hover, .salva-btn:focus-visible { color: var(--orange); }
.salva-btn .svgic { width: 15px; height: 15px; }
.salva-stato { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--green, #2e7d4f); }
.salva-stato .svgic { width: 14px; height: 14px; }
.salva-annulla { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--ink-muted); text-decoration: underline; cursor: pointer; }
@media screen { .salva-annulla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.salva-annulla:hover, .salva-annulla:focus-visible { color: var(--orange); }
/* Colonna destra delle schede: stesse misure di «Stampa». */
.cd-azioni .salva-form { display: flex; }
.cd-azioni .salva-form button.salva-btn, .cd-azioni .salva-form .salva-stato { font-size: 12px; font-weight: 500; }
@media screen { .cd-azioni .salva-form button.salva-btn, .cd-azioni .salva-form .salva-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-azioni .salva-form button.salva-annulla { font-size: 11.5px; text-decoration: underline; }
@media screen { .cd-azioni .salva-form button.salva-annulla { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cd-azioni-norma { margin-bottom: 12px; }
/* Articolo di legge: accanto a «Stampa», sopra il testo. */
.art-azioni { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }

.archivio-blocco + .archivio-blocco { margin-top: 14px; }
.archivio-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; border-bottom: 1px solid var(--rule); }
.archivio-h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-mid); } /* senza maiuscolo continuo dall'08/10/2026 (REGIA, decisione 2) */
.archivio-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.archivio-filtro { min-height: 32px; padding: 4px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font: inherit; font-size: 12.5px; color: var(--ink-mid); cursor: pointer; }
.archivio-filtro span { color: var(--ink-muted); margin-left: 2px; }
.archivio-filtro:hover { border-color: var(--orange); color: var(--orange); }
.archivio-filtro[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.archivio-filtro[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
.archivio-elenco { list-style: none; margin: 0; padding: 0; }
.archivio-riga { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.archivio-riga:last-child { border-bottom: none; }
.archivio-riga[hidden] { display: none; }
.archivio-link { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-decoration: none; color: inherit; }
.archivio-link .tipo-badge { margin-top: 0; }
.archivio-titolo { flex: 1 1 260px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.archivio-link:hover .archivio-titolo { color: var(--orange); }
.archivio-aree { flex-basis: 100%; font-size: 12px; color: var(--ink-muted); }
@media screen { .archivio-aree { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.archivio-riga > .salva-form { flex: none; padding-top: 2px; }
.seguiti-sugg { border-top: 1px solid var(--rule); background: var(--surface, #f7f7f4); }
.seguiti-sugg .archivio-h3 { margin-bottom: 4px; }
.seguiti-sugg .archivio-riga { padding: 10px 0; }
@media (max-width: 600px) {
  .archivio-riga { flex-direction: column; }
}

.benvenuto-fascia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 18px; margin-bottom: 16px; background: var(--blue-lt); border-left: 3px solid var(--orange); border-radius: var(--radius); }
.benvenuto-fascia-testo { flex: 1 1 340px; }
.benvenuto-fascia-tit { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blue); }
.benvenuto-fascia p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); }
@media screen { .benvenuto-fascia p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.benvenuto-fascia-azioni, .benvenuto-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.benvenuto-salta { font-size: 13px; color: var(--ink-muted); }
@media screen { .benvenuto-salta { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.benvenuto-salta:hover { color: var(--orange); }
.benvenuto { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 24px 24px; }
.benvenuto-passi { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); }
@media screen { .benvenuto-passi { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.benvenuto-passi .is-attivo { color: var(--orange); }
.benvenuto-passi .is-fatto { color: var(--green, #2e7d4f); }
.benvenuto-h { font-family: var(--serif); font-size: 20px; color: var(--blue); margin: 0 0 8px; }
.benvenuto-intro { font-size: 14px; line-height: 1.6; color: var(--ink-mid); margin: 0 0 18px; max-width: 640px; }
.benvenuto-h3 { font-size: 14px; font-weight: 700; color: var(--ink-mid); margin: 18px 0 6px; } /* senza maiuscolo continuo dall'08/10/2026 */
.benvenuto-scelte { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 18px; }
.benvenuto-scelte label { align-items: flex-start; padding: 8px 0; min-height: 40px; line-height: 1.4; }
.benvenuto-scelte input { margin-top: 2px; }
.benvenuto-stato { display: block; font-size: 12px; color: var(--ink-muted); }
@media screen { .benvenuto-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.benvenuto-nota { margin-top: 6px; }
.benvenuto-fatto { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; }

/* Home pubblica, 06/10/2026 (Romolo e Alessia): casetta «Home» nei menu,
   sezione «Su misura per te» (partials/home-su-misura.php), richiami alla
   personalizzazione, piè di pagina a cinque colonne. */
.nv-home { padding: 0 14px; }
.nv-home .svgic { width: 18px; height: 18px; }
.nv-barra-inner > .nv-etichetta + .nv-home { border-left: 0; }
.nv-barra-inner > .nv-home + .nv-aree .nv-voce { border-left: 1px solid var(--rule); }
.navbar-home { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 12px; border-radius: 50%; color: var(--blue); text-decoration: none; }
.navbar-home .svgic { width: 19px; height: 19px; }
.navbar-home:hover, .navbar-home:focus-visible { color: var(--orange); background: var(--surface); }
.navbar-home.active { color: var(--orange); }

.ui-ponte { margin-left: auto; font-size: 13px; }
@media screen { .ui-ponte { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

.su-misura { background: var(--blue-lt); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* fondo chiaro: il blu resta solo alla hero (Romolo, 06/10/2026) */
.su-misura-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.su-misura .pres-eyebrow { color: var(--orange); }
.at .su-misura-tit { font-family: var(--serif); font-size: 30px; line-height: 1.2; color: var(--blue); margin: 6px 0 10px; }
.at .su-misura-lede { font-size: 16px; line-height: 1.6; color: var(--ink-mid); margin: 0 0 22px; max-width: 560px; }
.at ol.su-misura-punti { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.su-misura-punti li { display: flex; gap: 14px; align-items: flex-start; scroll-margin-top: 200px; }
.smp-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--orange); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; }
.smp-ic .svgic { width: 18px; height: 18px; }
.smp-corpo strong { display: block; font-size: 15px; color: var(--blue); }
.smp-corpo > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: var(--ink-mid); }
@media screen { .smp-corpo > span { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.smp-corpo a { color: var(--orange); font-weight: 600; white-space: nowrap; }
.smp-conta { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.at .su-misura-nota { font-size: 13px; font-style: italic; color: var(--ink-muted); margin: 0 0 16px; }
@media screen { .at .su-misura-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.su-misura-esempio { margin: 0; }
.sme-carta { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); box-shadow: 0 14px 32px rgba(27,58,92,.16); border: 1px solid var(--rule); overflow: hidden; }
.sme-testa { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.sme-tit { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blue); }
.sme-campanella { position: relative; display: inline-flex; color: var(--blue); }
.sme-campanella .svgic { width: 20px; height: 20px; }
.sme-campanella span { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
@media screen { .sme-campanella span { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-tab { display: flex; gap: 16px; padding: 10px 18px 0; font-size: 12px; font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--rule); }
@media screen { .sme-tab { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-tab span { padding-bottom: 8px; border-bottom: 2px solid transparent; }
.sme-tab .is-on { color: var(--orange); border-bottom-color: var(--orange); }
.at ul.sme-notifiche { list-style: none; margin: 0; padding: 4px 18px; }
.sme-notifiche li { display: block; padding: 9px 0 9px 10px; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; }
.sme-notifiche li:last-child { border-bottom: 0; }
.sme-notifiche li.is-nuova { border-left-color: var(--orange); }
.sme-k { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-muted); }
@media screen { .sme-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-k b { color: var(--orange); margin-left: 6px; }
.sme-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 2px; }
@media screen { .sme-t { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-d { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
@media screen { .sme-d { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-archivio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--rule); }
.sme-archivio .sme-k { margin-right: 6px; }
.sme-chip { padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 11.5px; color: var(--ink-mid); }
@media screen { .sme-chip { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-chip.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.sme-azioni { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 18px 14px; border-top: 1px solid var(--rule); }
.sme-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
@media screen { .sme-btn { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.sme-btn .svgic { width: 14px; height: 14px; }
.sme-didascalia { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--ink-muted); }
@media screen { .sme-didascalia { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 900px) {
  .su-misura-grid { grid-template-columns: 1fr; gap: 32px; }
  .at .su-misura-tit { font-size: 25px; }
}

.nv-norma-segui { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-mid); }
@media screen { .nv-norma-segui { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nv-norma-segui .svgic { width: 16px; height: 16px; color: var(--orange); vertical-align: -3px; margin-right: 6px; }
.nv-hub { margin-top: 28px; }

.piano-plus + .piano-plus { margin-top: 6px; }

.footer-grid-5 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-credenziali a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .footer-grid-5 { grid-template-columns: 1fr 1fr; } .footer-grid-5 > div:first-child { grid-column: 1 / -1; } }

/* ── MENU UTENTE NELLA BARRA (REGIA «La mia Accademia», punto B, 08/10/2026) ──
   Il riquadro nome + professione è l'ingresso a «La mia Accademia»: avatar a
   iniziali, freccetta, tendina. Si apre al clic o al tocco (navbar-aree.js,
   classe is-open); al passaggio del mouse solo dove c'è un mouse. */
.menu-utente { position: relative; }
.at .menu-utente-btn { flex-direction: row; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; background: var(--white); cursor: pointer; font: inherit; color: var(--ink); }
.at .menu-utente-btn:hover, .menu-utente.is-open .menu-utente-btn { border-color: var(--ink); }
.user-chip-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.user-chip-testo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.user-chip-chev { width: 24px; height: 24px; flex-shrink: 0; margin-left: 2px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: transform .15s, background .15s; } /* cerchio arancione: si vede che apre un menu (Romolo, 08/10/2026) */
.menu-utente-btn:hover .user-chip-chev { background: var(--orange-dark); }
.menu-utente.is-open .user-chip-chev { transform: rotate(180deg); }
.menu-utente-voci { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; min-width: 270px; margin: 0; padding: 6px 0; list-style: none; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
/* Ponte invisibile sopra la tendina: il mouse passa dal riquadro alle voci senza che si chiuda. */
.menu-utente-voci::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.menu-utente.is-open .menu-utente-voci { display: block; }
@media (hover: hover) { .menu-utente:hover .menu-utente-voci { display: block; } }
/* Scelta una voce, la tendina si chiude anche se il mouse è ancora sopra (navbar-aree.js, is-scelto). */
.menu-utente.is-scelto .menu-utente-voci, .menu-utente.is-scelto:hover .menu-utente-voci { display: none; }
/* La barra in alto sopra le barre di pagina (z-index 50): prima, in «La mia Accademia», la barra
   delle sezioni copriva la parte alta della tendina (08/10/2026). */
.at .navbar { z-index: 60; }
.menu-utente-voci li { margin: 0; }
.menu-utente-voci a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
@media screen { .menu-utente-voci a { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.menu-utente-voci a:hover, .menu-utente-voci a:focus-visible { background: var(--blue-lt); color: var(--blue); }
.menu-utente-voci .menu-utente-principale { font-weight: 600; color: var(--blue); }
.menu-utente-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
@media screen { .menu-utente-n { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.menu-utente-stato { margin: 4px 0 !important; padding: 8px 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--ink-muted); }
@media screen { .menu-utente-stato { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 640px) {
  .at .menu-utente-btn { padding: 4px 8px 4px 4px; }
  .menu-utente-btn .user-chip-titolo { display: none; }
  .menu-utente-voci a { padding: 12px 16px; } /* tocco comodo, almeno 40px */
}

/* ── NORMATIVA: «Salva» e «Segui questa normativa» nella testata, campanella
   «Segui» sulle righe dell'indice articoli (REGIA «La mia Accademia», punto E,
   08/10/2026) ── */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.norm-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.norm-azioni .salva-form { gap: 4px 10px; }
.norm-azioni .salva-btn { padding: 7px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius); color: #fff; font-size: 13px; }
@media screen { .norm-azioni .salva-btn { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-azioni .salva-btn:hover, .norm-azioni .salva-btn:focus-visible { background: #fff; color: var(--blue); }
.norm-azioni .salva-stato { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 13px; font-weight: 600; }
@media screen { .norm-azioni .salva-stato { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-azioni .salva-stato .svgic { width: 15px; height: 15px; }
.norm-azioni .salva-annulla { color: rgba(255,255,255,.7); }
.norm-azioni .salva-annulla:hover, .norm-azioni .salva-annulla:focus-visible { color: #fff; }
.art-row { position: relative; }
.art-row-top { padding-right: 34px; }
.art-row > .salva-form-icona { position: absolute; top: 7px; right: 10px; }
.salva-icona { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.salva-icona .svgic { width: 15px; height: 15px; }
.art-row:hover .salva-icona, .salva-icona:focus-visible, .salva-icona.is-attivo { opacity: 1; }
.salva-icona:hover, .salva-icona:focus-visible { border-color: var(--rule); color: var(--orange); background: var(--white); }
.salva-icona.is-attivo { color: var(--orange); }
/* Al tocco non c'è il passaggio del mouse: sempre visibile, ma discreta. */
@media (hover: none) { .salva-icona { opacity: .55; } .salva-icona.is-attivo { opacity: 1; } }

/* Notifiche raggruppate di una normativa seguita (08/10/2026): elenco all'apertura. */
.notif-gruppo-elenco { margin: -4px 0 10px 15px; }
.notif-gruppo-elenco summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.notif-gruppo-elenco summary:hover { color: var(--orange); }
.notif-gruppo-elenco ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--rule); }
.notif-elenco .notif-gruppo-elenco li a { padding: 6px 0 6px 4px; border-left: 0; }
.notif-gruppo-elenco .notif-titolo { font-size: 13px; font-weight: 500; }
@media screen { .notif-gruppo-elenco .notif-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.notif-gruppo-elenco .notif-dettaglio { font-size: 12px; }
@media screen { .notif-gruppo-elenco .notif-dettaglio { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* «Il mio archivio» (08/10/2026): articoli sotto la loro normativa; «Visti di recente». */
.archivio-riga-sotto { padding-left: 28px; }
.archivio-riga-sotto .archivio-titolo { font-weight: 500; }
.archivio-riga-gruppo .archivio-titolo { color: var(--ink-mid); }
.archivio-testa-visti { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.visti-svuota { margin: 0; }

/* Banner «Personalizza Accademia» in colonna destra, versione compatta (08/10/2026, punto D). */
.benvenuto-fascia.is-colonna { display: block; padding: 14px 16px; margin-bottom: 18px; }
.benvenuto-fascia.is-colonna .benvenuto-fascia-tit { font-size: 15.5px; }
.benvenuto-fascia.is-colonna p { font-size: 13px; }
@media screen { .benvenuto-fascia.is-colonna p { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.benvenuto-fascia.is-colonna .benvenuto-fascia-azioni { margin-top: 12px; gap: 8px 16px; }
.benvenuto-fascia.is-colonna .btn-primary { padding: 8px 14px; font-size: 13px; }
@media screen { .benvenuto-fascia.is-colonna .btn-primary { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tue-aree-riga { margin: 0 0 18px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-mid); background: var(--blue-lt); border-radius: var(--radius); }
@media screen { .tue-aree-riga { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.tue-aree-riga .k { font-weight: 600; color: var(--blue); }
.benvenuto-h3-nota { font-family: var(--sans, inherit); font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
@media screen { .benvenuto-h3-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.norm-azioni-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.7); }
@media screen { .norm-azioni-nota { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Niente maiuscolo continuo nei testi (08/10/2026, decisione di Romolo su
   proposta REGIA): tolti text-transform: uppercase e la spaziatura delle
   lettere che lo accompagnava da tutte le regole del tema (badge di tipo,
   intestazioni di colonna, etichette). Le sigle restano come sono scritte. */

/* «Menu dell'area» in testa alla barra di un'area tematica (Romolo, 08/10/2026):
   casetta + nome dell'area su due righe, come «Menu / Aree tematiche» della
   barra principale; porta alla pagina principale dell'area. */
.stick-menu.area-hub-stick-menu a.stick-area-home { gap: 8px; padding: 6px 14px 6px 0; margin-right: 6px; color: var(--blue); border-bottom-color: transparent; }
.stick-menu.area-hub-stick-menu a.stick-area-home.on { border-bottom-color: var(--orange); }
.stick-area-home .svgic { width: 17px; height: 17px; color: var(--orange); }
.stick-area-testo { display: flex; flex-direction: column; line-height: 1.2; }
.stick-area-k { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); }
@media screen { .stick-area-k { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.stick-area-nome { font-size: 13px; font-weight: 700; color: var(--blue); }
@media screen { .stick-area-nome { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.stick-area-home:hover .stick-area-nome { color: var(--orange); }
.stick-menu-inner > a.stick-area-home::before { display: none; }
.stick-menu-inner > a.stick-area-home + a::before { width: 2px; background: var(--rule); height: 1.6em; }

/* ── HOME PUBBLICA (08/10/2026, Romolo, REGIA e Code): fascia «Proponi un tema»,
   formule del «genoma» in testa a Chi siamo, frase sulla verificabilità nel Metodo ── */
.rc-fascia { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rc-fascia-inner { display: flex; align-items: center; gap: 28px; }
.rc-fascia-foto { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange-lt); }
.rc-fascia-testo { max-width: 760px; }
.rc-fascia-tit { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--blue); margin: 0 0 8px; }
.rc-fascia-testo p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-mid); }
.rc-fascia-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px !important; }
.rc-fascia-conta { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }
@media (max-width: 640px) { .rc-fascia-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .rc-fascia-foto { width: 72px; height: 72px; } }
.metodo-verifica { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--blue); }
.metodo-verifica .svgic { width: 17px; height: 17px; color: var(--orange); flex-shrink: 0; }
/* ── HOME PUBBLICA: box «Accademia in quattro punti» e numerazione delle sezioni
   (schizzo di Romolo, REGIA rev. 11:35, 08/10/2026). La griglia ripete quella
   della hero (1fr 400px, gap 48 → 1fr 340px, gap 32 sotto i 1100px), così il box
   ha gli stessi bordi del box «Affidabilità dei contenuti». ── */
.ui-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.home-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; margin-right: 10px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--sans, inherit); font-size: 13.5px; font-weight: 700; line-height: 1; vertical-align: 3px; }
@media screen { .home-num { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.quattro-punti { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px 16px 14px; }
.qp-tit { font-size: 13px; font-weight: 700; color: var(--blue); margin: 0 0 10px; }
.qp-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qp-griglia li { margin: 0; }
.qp-cella { display: flex; align-items: flex-start; gap: 0; height: 100%; padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.qp-cella .home-num { width: 24px; height: 24px; font-size: 12.5px; vertical-align: 0; margin-right: 9px; }
.qp-cella:hover, .qp-cella:focus-visible { border-color: var(--orange); background: var(--orange-lt); }
.qp-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qp-testo strong { font-size: 13.5px; line-height: 1.3; color: var(--blue); }
.qp-testo span { font-size: 12.5px; line-height: 1.45; color: var(--ink-mid); }
.qp-cella:hover strong { color: var(--orange-dark); }
@media (max-width: 1100px) { .ui-griglia { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; } }
@media (max-width: 900px) { .ui-griglia { grid-template-columns: 1fr; gap: 20px; } } /* tablet: il box sotto la lista, sempre 2 × 2 */
@media (max-width: 600px) { .qp-griglia { grid-template-columns: 1fr; } }            /* telefono: una colonna */

/* ── Addendum REGIA 11:45 (08/10/2026): tre card sotto il box dei quattro punti,
   modulo illustrativo nella fascia ④ ── */
.ui-griglia { align-items: stretch; }
.ui-lato { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qp-card { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 120px; }
.qp-card-voce { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius-lg); background: var(--blue); text-decoration: none; box-shadow: var(--shadow-sm); }
.qp-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: transform .3s; }
.qp-card-voce::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,58,92,.92) 0%, rgba(26,58,92,.55) 45%, rgba(26,58,92,.08) 100%); transition: background .2s; }
.qp-card-tit { position: relative; z-index: 1; padding: 10px 11px; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #fff; }
.qp-card-voce:hover .qp-card-img, .qp-card-voce:focus-visible .qp-card-img { transform: scale(1.06); }
.qp-card-voce:hover::after, .qp-card-voce:focus-visible::after { background: linear-gradient(to top, rgba(193,90,44,.92) 0%, rgba(26,58,92,.5) 60%, rgba(26,58,92,.05) 100%); }
@media (max-width: 900px) { .qp-card { min-height: 130px; } }
@media (max-width: 600px) { .qp-card { grid-template-columns: 1fr; } .qp-card-voce { min-height: 96px; } }

.rc-fascia-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 38%); gap: 28px; align-items: center; }
.rc-esempio { margin: 0; }
.rc-esempio-carta { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; background: var(--surface, #F5F6F4); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); pointer-events: none; user-select: none; }
.rc-es-lbl { font-size: 11.5px; font-weight: 600; color: var(--ink-mid); }
@media screen { .rc-es-lbl { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-es-lbl em { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.rc-es-campo { display: block; padding: 7px 9px; font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 4px; }
@media screen { .rc-es-campo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-es-alto { min-height: 52px; }
.rc-es-conferma { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; line-height: 1.45; color: var(--ink-mid); margin: 2px 0 6px; }
@media screen { .rc-es-conferma { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rc-es-casella { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; border: 1px solid var(--ink-muted); border-radius: 2px; background: var(--white); }
.rc-es-invia { align-self: flex-start; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #fff; background: var(--orange); border-radius: var(--radius); }
@media screen { .rc-es-invia { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 900px) {
  .rc-fascia-inner { grid-template-columns: auto minmax(0, 1fr); }
  .rc-esempio { grid-column: 1 / -1; max-width: 520px; } /* tablet: sotto il testo, compatto */
}
@media (max-width: 640px) {
  .rc-fascia-inner { display: flex; }
  .rc-esempio { display: none; } /* telefono: resta il testo con «Come funziona →» */
}
/* La sezione #proponi della home eredita gli stili della vecchia fascia .rc-fascia (card da
   980 px, padding proprio): qui torna una sezione a tutta larghezza come le altre e l'aspetto
   a scheda passa al contenuto, allineato alla griglia della pagina (08/10/2026). */
section.page-section.rc-fascia { display: block; max-width: none; margin: 0; padding: 40px 24px; background: var(--white); border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; }
section.rc-fascia .rc-fascia-inner { max-width: 1152px; margin: 0 auto; padding: 28px 32px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--orange); border-radius: var(--radius-lg); }
@media (max-width: 900px) { section.page-section.rc-fascia { padding: 32px 48px; } }
@media (max-width: 640px) { section.page-section.rc-fascia { padding: 28px 16px; } section.rc-fascia .rc-fascia-inner { padding: 20px 18px; } }

/* Illustrazioni in filigrana nelle celle dei quattro punti (Romolo, 08/10/2026): dietro il
   testo, in basso a destra, proporzioni originali (larghezza fissa, altezza automatica);
   le misure del box e delle celle restano quelle di prima. */
.qp-cella.has-filigrana { position: relative; overflow: hidden; background: var(--white); }
.qp-cella.has-filigrana::after { content: ""; position: absolute; right: -12px; bottom: -8px; width: 145px; aspect-ratio: 560 / 380; background: var(--qp-img) no-repeat center / contain; opacity: .45; pointer-events: none; transition: opacity .2s; } /* più evidente (Romolo, 08/10/2026; prima .2 e 130px) */
.qp-cella.has-filigrana:hover::after, .qp-cella.has-filigrana:focus-visible::after { opacity: .65; }
.qp-cella.has-filigrana > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .qp-cella.has-filigrana::after { width: 150px; } }
/* Filigrana a tutta cella (Romolo, 08/10/2026): l'illustrazione riempie la casella,
   più tenue; testi più scuri e marcati per restare leggibili sopra il disegno. */
.qp-cella.has-filigrana::after { inset: 0; right: 0; bottom: 0; width: auto; aspect-ratio: auto; background: var(--qp-img) no-repeat 70% 60% / cover; opacity: .3; }
.qp-cella.has-filigrana:hover::after, .qp-cella.has-filigrana:focus-visible::after { opacity: .42; }
.qp-cella.has-filigrana .qp-testo strong { color: var(--blue); font-weight: 700; }
.qp-cella.has-filigrana .qp-testo span { color: var(--ink); font-weight: 500; }

/* Celle dei quattro punti, versione definita con REGIA (addendum 2) e parere di ChatGPT
   (08/10/2026): fondo azzurro chiarissimo sfumato dall'alto (dalla tinta --blue-lt),
   illustrazione in basso a destra (58% × 68% della cella), opacità ~30% che sfuma verso
   sinistra e verso l'alto, così il testo non poggia sulla parte piena del disegno;
   mix-blend-mode multiply. Testi e numeri invariati. Sostituisce la «tutta cella». */
.qp-cella.has-filigrana { background: linear-gradient(180deg, color-mix(in srgb, var(--blue-lt) 80%, #fff) 0%, color-mix(in srgb, var(--blue-lt) 30%, #fff) 100%); transition: transform .2s, box-shadow .2s, border-color .15s; }
.qp-cella.has-filigrana::after { inset: auto 0 0 auto; width: 58%; height: 68%; aspect-ratio: auto; background: var(--qp-img) no-repeat right bottom / contain; opacity: .32; mix-blend-mode: multiply; filter: saturate(.7);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 50%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 50%); mask-composite: intersect;
  transform-origin: right bottom; transition: opacity .2s, transform .25s; }
.qp-cella.has-filigrana:hover, .qp-cella.has-filigrana:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); background: linear-gradient(180deg, color-mix(in srgb, var(--blue-lt) 80%, #fff) 0%, color-mix(in srgb, var(--blue-lt) 30%, #fff) 100%); }
.qp-cella.has-filigrana:hover::after, .qp-cella.has-filigrana:focus-visible::after { opacity: .6; transform: scale(1.03); }
@media (max-width: 600px) { .qp-cella.has-filigrana::after { width: 45%; height: 90%; } }

/* Colonna destra: le tre card riempiono lo spazio fino al fondo della lista (crescono loro,
   non le celle); la card Percorsi è centrata sulla catena di icone. */
.qp-card { min-height: 90px; }
/* Percorsi: la catena di quattro icone non entra in un ritaglio da 125 px; immagine intera in larghezza, in alto, sotto il blu della card con il titolo. */
.qp-card-voce[href*="percors"] .qp-card-img { inset: 4px 0 auto 0; height: auto; object-fit: contain; object-position: 50% 0; }
@media (max-width: 900px) { .qp-card-voce[href*="percors"] .qp-card-img { inset: 0; height: 100%; object-fit: cover; object-position: 50% 20%; } }

/* Testate blu con l'illustrazione del punto del «genoma» (Metodo, Proponi un tema;
   08/10/2026): card bianca a destra del titolo, come il Radar nelle aree. Al telefono
   l'illustrazione si toglie, per non allungare la testata. */
.area-hero-illustrata > .at-container { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: center; }
.hero-illustrata-testo { min-width: 0; }
.hero-illustrazione { margin: 0; padding: 10px; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.hero-illustrazione img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .area-hero-illustrata > .at-container { grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; } }
@media (max-width: 640px) { .area-hero-illustrata > .at-container { display: block; } .hero-illustrazione { display: none; } }
/* Illustrazione ③ «Su misura» nel primo accesso guidato e in «Cosa seguo» vuoto (08/10/2026). */
.benvenuto-illustrazione { float: right; width: 200px; margin: 0 0 10px 20px; }
.benvenuto-illustrazione img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.seguiti-vuoto { display: flex; align-items: center; gap: 18px; }
.seguiti-vuoto-ill { flex: 0 0 150px; }
.seguiti-vuoto-ill img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.seguiti-vuoto[hidden] { display: none; }
@media (max-width: 640px) { .benvenuto-illustrazione, .seguiti-vuoto-ill { display: none; } }

/* ── Illustrazioni nelle quattro sezioni numerate della home (proposte di Romolo,
   08/10/2026). Decorative, il fondo si fonde con la sezione (multiply).
   ① e ②: a destra dell'intestazione. ③: in basso a sinistra, accanto a nota e
   pulsante. ④: in basso nella scheda, tra testo e modulo. Telefono: nascoste. ── */
.sez-ill { margin: 0; pointer-events: none; }
.sez-ill img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.sez-testa-ill { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: center; }
.sez-testa-ill .nv-norma-testa { margin-bottom: 18px; }
.sez-ill-testa { width: 220px; }
.su-misura-piede { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sez-ill-piede { width: 210px; flex-shrink: 0; margin-bottom: -6px; }
section.rc-fascia .rc-fascia-inner { position: relative; }
.sez-ill-fascia { position: absolute; bottom: 0; right: calc(38% + 40px); width: 190px; z-index: 0; }
.rc-fascia-inner > .rc-fascia-testo, .rc-fascia-inner > .rc-esempio, .rc-fascia-inner > .rc-fascia-foto { position: relative; z-index: 1; }
@media (max-width: 1100px) { .sez-ill-fascia { display: none; } }
@media (max-width: 900px) { .sez-testa-ill { grid-template-columns: minmax(0, 1fr) 160px; gap: 20px; } .sez-ill-testa { width: 160px; } .sez-ill-piede { width: 170px; } }
@media (max-width: 640px) { .sez-testa-ill { display: block; } .sez-ill-testa, .sez-ill-piede { display: none; } }
/* ③: il disegno non deve spostare nota e pulsante (prima creava un vuoto sopra): posizione
   assoluta in basso a destra della colonna, la nota lascia lo spazio a destra. */
.su-misura-piede { position: relative; display: block; }
.su-misura-piede .su-misura-nota { max-width: calc(100% - 210px); }
.sez-ill-piede { position: absolute; right: 0; bottom: -8px; width: 190px; margin: 0; }
@media (max-width: 900px) { .su-misura-piede .su-misura-nota { max-width: calc(100% - 180px); } .sez-ill-piede { width: 160px; } }
@media (max-width: 640px) { .su-misura-piede .su-misura-nota { max-width: none; } }
/* ③ senza pulsante: nota e portatile affiancati, senza spazio sprecato (Romolo, 08/10/2026). */
.su-misura-piede { display: flex; align-items: center; gap: 18px; position: static; }
.su-misura-piede .su-misura-nota { max-width: none; flex: 1; margin: 0; }
.sez-ill-piede { position: static; width: 170px; flex: 0 0 170px; margin: 0; }
/* ④ testo in alto, disegno sotto il testo, centrato nella sua colonna (Romolo, 08/10/2026). */
section.rc-fascia .rc-fascia-inner { align-items: start; }
.rc-fascia-inner > .rc-fascia-foto { align-self: start; margin-top: 30px; }
.sez-ill-fascia { position: static; display: block; width: 210px; margin: 14px auto 0; }
@media (max-width: 1100px) { .sez-ill-fascia { display: block; width: 180px; } }
@media (max-width: 900px) { .sez-ill-piede { width: 150px; flex-basis: 150px; } }
@media (max-width: 640px) { .sez-ill-fascia { display: none; } }
.at ol.su-misura-punti { margin-bottom: 4px; }
.sez-ill-piede { width: 132px; flex-basis: 132px; }
.su-misura-piede { margin-top: -4px; }

/* ── HOME PUBBLICA COMPATTA (Romolo, 08/10/2026): «compatterei, conservando leggibilità ed
   eleganza». Un solo ritmo verticale per tutte le sezioni (30 px sopra e sotto al computer,
   24 al tablet, 20 al telefono) al posto di 28–52; margini interni ridotti. Caratteri,
   interlinea e larghezze dei testi invariati. Solo sulla home (body.home). ── */
body.home .at .page-section, body.home .at .page-section.sec-48, body.home .at .pres-block,
body.home .at #norma-vetrina.sec-48, body.home .at #vetrine.sec-48, body.home .at #aree.sec-48,
body.home .at section.page-section.rc-fascia { padding-top: 30px; padding-bottom: 30px; }
body.home .at .hero.hero-v2 { padding-top: 30px; padding-bottom: 32px; }
body.home .at .pres-head { margin-bottom: 12px; }
body.home .at .section-header { margin-bottom: 14px; padding-bottom: 8px; }
body.home .at .nv-norma-testa { margin-bottom: 12px; }
body.home .at .nv-hub { margin-top: 16px; }
body.home .at p.nv-chiusura { margin-top: 10px; }
body.home .at #aree .aree-sub { margin: 0 0 14px; padding: 10px 16px; }
body.home .at .su-misura-grid { gap: 32px; }
body.home .at .su-misura-lede { margin-bottom: 14px; }
body.home .at ol.su-misura-punti { gap: 10px; }
body.home .at section.rc-fascia .rc-fascia-inner { padding: 22px 28px; }
body.home .at .rc-fascia-inner > .rc-fascia-foto { margin-top: 18px; }
body.home .at .sez-ill-fascia { margin-top: 6px; width: 190px; }
body.home .at .chi-intro { gap: 32px; }
body.home .at .cred-grid { margin-top: 16px !important; }
body.home .at .perche-content { gap: 28px; }
body.home .at .piani-grid { margin-top: 16px; }
body.home .at .vetrina-testa { padding-bottom: 8px; }
@media (max-width: 900px) {
  body.home .at .page-section, body.home .at .page-section.sec-48, body.home .at .pres-block,
  body.home .at #norma-vetrina.sec-48, body.home .at #vetrine.sec-48, body.home .at #aree.sec-48,
  body.home .at section.page-section.rc-fascia { padding-top: 24px; padding-bottom: 24px; }
}
@media (max-width: 600px) {
  body.home .at .page-section, body.home .at .page-section.sec-48, body.home .at .pres-block,
  body.home .at #norma-vetrina.sec-48, body.home .at #vetrine.sec-48, body.home .at #aree.sec-48,
  body.home .at section.page-section.rc-fascia { padding-top: 20px; padding-bottom: 20px; }
}
body.home .at .gioielli .vetrina { padding: 14px 18px 16px; }
body.home .at .gioielli .vetrina-pub-banner img { aspect-ratio: 2.3 / 1; object-fit: cover; width: 100%; height: auto; }
body.home .at .gioielli .vetrina-testa { margin-bottom: 8px; }
/* Banner «Personalizza Accademia» in colonna: illustrazione ③ in filigrana, come le celle dei
   quattro punti (in basso a destra, sfuma verso sinistra e in alto; testo e pulsanti sopra). */
.benvenuto-fascia.is-colonna.has-filigrana { position: relative; overflow: hidden; }
.benvenuto-fascia.is-colonna.has-filigrana::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 62%; background: var(--qp-img) no-repeat right bottom / contain; opacity: .35; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 50%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 50%); mask-composite: intersect; }
.benvenuto-fascia.is-colonna.has-filigrana > * { position: relative; z-index: 1; }

/* ── Rinnovo dell'abbonamento (modulo pagamenti, rinnovo.php, 09/10/2026) ──
   Riquadro nel profilo di «La mia Accademia» (fondo blu) e pagina /abbonamento/rinnova/. */
.scheda-profilo .sp-abb { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.scheda-profilo .sp-abb-righe { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 18px; }
.scheda-profilo .sp-abb-righe dt { font-size: 11px; color: rgba(255,255,255,.6); }
@media screen { .scheda-profilo .sp-abb-righe dt { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-abb-righe dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; }
@media screen { .scheda-profilo .sp-abb-righe dd { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-abb-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
@media screen { .scheda-profilo .sp-abb-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-abb-esito { margin: 0 0 10px; padding: 7px 10px; border-radius: var(--radius); background: rgba(255,255,255,.12); font-size: 12.5px; }
@media screen { .scheda-profilo .sp-abb-esito { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-abb-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scheda-profilo .sp-abb-azioni .btn-primary { text-decoration: none; }
.scheda-profilo .sp-abb-form { margin: 0; }
.scheda-profilo .sp-abb-btn-chiaro { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius); padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
@media screen { .scheda-profilo .sp-abb-btn-chiaro { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.scheda-profilo .sp-abb-btn-chiaro:hover { border-color: #fff; }
.rinnova .rinnova-scheda { position: static; max-width: 560px; }
.rinnova .rinnova-testo { max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.rinnova .rinnova-esito { max-width: 560px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; }
@media screen { .rinnova .rinnova-esito { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rinnova .rinnova-esito-ok { background: #EAF3EA; color: #2B5A2E; }
.rinnova .rinnova-esito-ko { background: #FBECE8; color: #8A2F1C; }
.rinnova .rinnova-form { margin-top: 16px; }
.rinnova .rinnova-invio { width: 100%; padding: 11px 16px; font-size: 14px; }
.rinnova .rinnova-presto { font-size: 13px; line-height: 1.5; color: var(--ink-mid); margin: 14px 0 0; }
@media screen { .rinnova .rinnova-presto { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rinnova .rinnova-presto a, .rinnova .rinnova-aiuto a { color: var(--orange); text-decoration: underline; }
.rinnova .rinnova-aiuto { max-width: 560px; font-size: 12.5px; color: var(--ink-muted); margin-top: 12px; }
@media screen { .rinnova .rinnova-aiuto { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.rinnova .sott-riga small { font-weight: 400; color: var(--ink-muted); }

/* Scheda curriculare: pulsante del riquadro Profilazioni distanziato come quello della Collana (09/10/2026). */
.pagina-curatore .curatore-collana > p { margin: 22px 0 0; }

/* Scheda curriculare: riquadro «Ideatore e realizzatore di Accademia Tecnojus», parole di Romolo come citazione firmata (11/10/2026). */
.pagina-curatore .curatore-citazione { margin: 0; padding: 0; border: 0; }
.pagina-curatore .curatore-citazione p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.65; color: var(--ink); }
.pagina-curatore .curatore-citazione footer { margin-top: 12px; text-align: right; font-size: 14px; font-weight: 600; color: var(--orange); }
.pagina-curatore .curatore-citazione footer::before { content: "— "; }

/* ── Volumi inclusi nell'abbonamento (09/10/2026) ── */
.pub-incluso { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--green, #2e7d4f); }
@media screen { .pub-incluso { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-incluso .svgic { width: 14px; height: 14px; }
.pub-scelta { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.pub-scelta-form { margin: 0; }
.pub-scegli { display: inline-flex; align-items: center; gap: 6px; }
.pub-scegli .svgic { width: 15px; height: 15px; }
.pub-scelta-nota { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-mid); max-width: 62ch; }
@media screen { .pub-scelta-nota { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-inclusi { border-bottom: 1px solid var(--rule); }
.pub-inclusi-titolo { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
@media screen { .pub-inclusi-titolo { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.pub-inclusi-da-scegliere { margin: 8px 0 0; font-size: 13.5px; }
@media screen { .pub-inclusi-da-scegliere { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */

/* Quesiti redazionali (09/10/2026) */
.nota-quesiti { margin: var(--sp-4, 24px) 0 0; padding: 10px 14px; background: var(--surface); border-radius: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-mid); }
@media screen { .nota-quesiti { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.nota-quesiti a, .nota-quesiti-hero a { font-weight: 600; white-space: nowrap; }
.nota-quesiti-hero { margin-top: 6px; }

/* ── COPERTINE DI DOSSIER, QUADERNI E FOCUS (09/10/2026) ──
   Colore unico per tipo: Dossier ruggine, Quaderno viola, Focus petrolio.
   .dqf-cop-web = testata della scheda; .dqf-cop-a4 = prima pagina della
   Stampa (nascosta a schermo); .dqf-copia-personale = nota su ogni pagina
   stampata. Funzioni in functions.php (accademia_dqf_copertina_html). */
.dqf-dossier  { --dqf: var(--c-dossier); --dqf-scuro: var(--orange-dark); --dqf-chiaro: var(--c-dossier-lt); }
.dqf-quaderno { --dqf: var(--c-quaderno); --dqf-scuro: #4A2A55; --dqf-chiaro: var(--c-quaderno-lt); }
.dqf-focus    { --dqf: var(--c-focus); --dqf-scuro: #134242; --dqf-chiaro: var(--c-focus-lt); }
.dqf-cop-web { position: relative; background: var(--white); border-top: 8px solid var(--dqf); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 26px 40px 18px; min-height: 330px; display: flex; flex-direction: column; overflow: hidden; }
.dqf-cop-web .dqf-mot { position: absolute; right: 26px; top: 22px; width: 34%; height: 250px; color: var(--dqf); }
.dqf-cop-web .dqf-mot svg { width: 100%; height: 100%; }
.dqf-cop-web .dqf-testo { position: relative; max-width: 62%; flex: 1; }
.dqf-tipo { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dqf); }
@media screen { .dqf-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dqf-motto { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-muted); }
.dqf-ancora { display: inline-block; margin-top: 30px; padding: 5px 10px; border-radius: 3px; background: var(--dqf-chiaro); color: var(--dqf-scuro); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
@media screen { .dqf-ancora { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dqf-cop-web .dqf-titolo { margin: 14px 0 0; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.dqf-cop-web .dqf-sotto { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink-mid); }
.dqf-piede { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; font-size: 12.5px; color: var(--ink-muted); }
.banded-header.bh-con-copertina { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px solid var(--rule); }
.bh-con-copertina .meta-grid { grid-template-columns: repeat(3, 1fr); }
.dqf-cop-a4 { display: none; }
@media (max-width: 900px) {
  .dqf-cop-web { padding: 20px 20px 16px; min-height: 0; }
  .dqf-cop-web .dqf-mot { width: 40%; height: 120px; top: 16px; right: 12px; opacity: .45; }
  .dqf-cop-web .dqf-testo { max-width: 100%; }
  .dqf-cop-web .dqf-titolo { font-size: 25px; }
  .bh-con-copertina .meta-grid { grid-template-columns: 1fr; }
}
@media print {
  @page copertina { size: A4; margin: 16mm 16mm 18mm; } /* stessi margini delle altre pagine: Chrome impagina tutto con la larghezza della prima */
  .dqf-cop-web { display: none !important; }
  .dqf-cop-a4 { display: block; page: copertina; break-after: page; position: relative; width: 100%; height: 262mm; overflow: hidden; background: #fff; font-family: var(--sans); color: #16213E; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dqf-a4-banda { display: flex; height: 26mm; }
  .dqf-a4-logo { width: 72mm; display: flex; align-items: center; padding-left: 0; box-sizing: border-box; }
  .dqf-a4-logo img { width: 56mm; height: auto; }
  .dqf-a4-tipo { flex: 1; background: var(--dqf); color: #fff; display: flex; align-items: center; justify-content: flex-end; padding-right: 8mm; font-family: var(--serif); font-size: 22pt; font-weight: 600; }
  .dqf-cop-a4 .dqf-mot { position: absolute; top: 32mm; left: 0; width: 100%; height: 110mm; color: var(--dqf); }
  .dqf-cop-a4 .dqf-mot svg { width: 100%; height: 100%; }
  .dqf-a4-main { position: absolute; top: 150mm; left: 0; right: 0; }
  .dqf-cop-a4 .dqf-ancora { margin: 0 0 7mm; font-size: 9pt; letter-spacing: .14em; text-transform: uppercase; }
  .dqf-a4-titolo { font-family: var(--serif); font-size: 30pt; line-height: 1.12; font-weight: 600; color: var(--dqf-scuro); margin: 0 0 5mm; }
  .dqf-cop-a4 .dqf-sotto { font-family: var(--serif); font-style: italic; font-size: 13pt; line-height: 1.4; color: #45507A; margin: 0; max-width: 150mm; }
  .dqf-a4-piede { position: absolute; left: 0; right: 0; bottom: 8mm; }
  .dqf-a4-filetto { height: 1.1mm; width: 28mm; background: var(--dqf); margin-bottom: 5mm; }
  .dqf-a4-col { display: flex; justify-content: space-between; font-size: 9.5pt; line-height: 1.5; }
  .dqf-a4-dx { text-align: right; color: #45507A; }
  .dqf-a4-motto { margin-top: 7mm; font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #6B7494; }
  .dqf-a4-copia { position: absolute; left: 0; right: 0; bottom: 0; font-size: 7.5pt; color: #555; text-align: center; }
  /* in stampa i dati della testata sono già in copertina */
  body.single-dossier .banded-header.bh-con-copertina, body.single-quaderno .banded-header.bh-con-copertina, body.single-focus .banded-header.bh-con-copertina,
  .bh-con-copertina ~ .fascia-correlazioni, .bh-con-copertina ~ .ctx-menu { display: none !important; }
}
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  /* la pagina stampata detta la larghezza: niente contenitori a misura di schermo */
  .at-container, .page-grid-cd, .main-col { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
  .at-container { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Segno di lettura D/Q/F: «Riprendi da …» (09/10/2026) */
.dqf-riprendi { display: flex; align-items: center; gap: 8px; padding: 10px 40px; background: var(--surface); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-mid); text-decoration: none; }
@media screen { .dqf-riprendi { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dqf-riprendi b { color: var(--ink); font-weight: 600; }
.dqf-riprendi .svgic { width: 14px; height: 14px; color: var(--orange); flex-shrink: 0; }
.dqf-riprendi:hover b { color: var(--orange); }
.dqf-riprendi-compatto { padding: 2px 0 0; background: none; border: 0; font-size: 12px; }
@media screen { .dqf-riprendi-compatto { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 900px) { .dqf-riprendi:not(.dqf-riprendi-compatto) { padding: 10px 20px; } }
@media print { .dqf-riprendi { display: none !important; } }
.archivio-riga:has(.dqf-riprendi-compatto) { flex-wrap: wrap; }
.archivio-riga .dqf-riprendi-compatto { order: 3; flex-basis: 100%; padding-left: 0; }
/* Sezioni di Dossier/Quaderni/Focus raggiunte da link diretti (#nodo-…, «Riprendi da»): il titolo resta sotto navbar + menu contestuale */
[id^="nodo-"], #sec-abs { scroll-margin-top: calc(var(--navbar-h, 123px) + 80px); }
/* Apertura fissa D/Q/F: «Che cos'è …» + avvertenza (09/10/2026) */
.dqf-apertura { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dqf-checos { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.dqf-checos summary { cursor: pointer; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
@media screen { .dqf-checos summary { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.dqf-checos summary::-webkit-details-marker { display: none; }
.dqf-checos summary::before { content: "+"; display: inline-flex; width: 16px; justify-content: center; color: var(--orange); font-weight: 700; }
.dqf-checos[open] summary::before { content: "−"; }
.dqf-checos p { margin: 0; padding: 0 14px 12px 38px; font-size: 14px; line-height: 1.6; color: var(--ink-mid); }
.dqf-avvertenza { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.dqf-avvertenza .svgic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
@media print { .dqf-a4-avvertenza { margin-top: 3mm; font-size: 7.5pt; color: #6B7494; } }
/* Home pubblica: «Cosa trovi in Accademia», sette tipi di contenuto (09/10/2026) */
.home-tipi-testa { margin-bottom: 18px; }
.home-tipi-testa .section-title { margin: 4px 0 8px; }
.home-tipi-intro { margin: 0; max-width: 72ch; font-size: 15px; line-height: 1.6; color: var(--ink-mid); }
.home-tipi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
.home-tipo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.home-tipo:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.home-tipo-nome { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--blue); }
.home-tipo-nome .svgic { width: 20px; height: 20px; color: var(--tipo, var(--blue)); flex-shrink: 0; }
/* colore del segno per tipo: palette REGIA «accessibilita-colori-segni» 09/10/2026 (contrasti ≥ 5:1); Orientamenti e Normative nel blu del sito */
.home-tipo-sentenza { --tipo: var(--c-sentenza); } .home-tipo-commento { --tipo: var(--c-commento); } .home-tipo-quesito { --tipo: var(--c-quesito); }
.home-tipo-focus { --tipo: var(--c-focus); } .home-tipo-quaderno { --tipo: var(--c-quaderno); } .home-tipo-dossier { --tipo: var(--c-dossier); }
.home-tipo:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.home-tipo-domanda { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--ink); }
.home-tipo-breve { font-size: 14px; line-height: 1.55; color: #4A5B75; flex: 1; } /* contrasto ≥ 4,5:1 (REGIA accessibilità 09/10/2026) */
.home-tipo-vai { font-size: 13px; font-weight: 600; color: #9C4620; }
@media screen { .home-tipo-vai { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */ /* 6,3:1 */
.home-strumenti-tit { margin: 0 0 14px; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--blue); }
@media (max-width: 1100px) { .home-tipi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-tipi { grid-template-columns: 1fr; gap: 10px; } .home-tipo { padding: 12px 14px; gap: 6px; } .home-tipo-breve { display: none; } }
.home-tipi-guida { font-weight: 600; color: #9C4620; white-space: nowrap; }
/* Copertina di stampa anche per Sentenze, Commenti, Quesiti (09/10/2026) + segno del tipo nella banda */
.dqf-sentenza { --dqf: var(--c-sentenza); --dqf-scuro: #26313F; --dqf-chiaro: var(--c-sentenza-lt); }
.dqf-commento { --dqf: var(--c-commento); --dqf-scuro: #28336B; --dqf-chiaro: var(--c-commento-lt); }
.dqf-quesito  { --dqf: var(--c-quesito);  --dqf-scuro: #561B2B; --dqf-chiaro: var(--c-quesito-lt); }
@media print {
  .dqf-a4-tipo .svgic { width: 9mm; height: 9mm; margin-right: 4mm; color: #fff; stroke: #fff; }
  .dqf-a4-tipo { gap: 0; }
}
.dqf-tipo { display: flex; align-items: center; gap: 8px; } .dqf-tipo .svgic { width: 20px; height: 20px; flex-shrink: 0; }
/* Come nasce una scheda (09/10/2026): il metodo su un caso reale */
.cns-intro { font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
.cns-nota { font-size: 14px; color: var(--ink-muted); margin: -4px 0 16px; }
.cns-scheda { border-top: 3px solid var(--c-sentenza); padding-top: 24px; }
.cns-scheda-testa { margin-bottom: 8px; }
.cns-scheda-tipo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-sentenza); }
@media screen { .cns-scheda-tipo { font-size: 12.5px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
.cns-scheda-titolo { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--blue); line-height: 1.3; margin: 4px 0; }
.cns-scheda-estremi { font-size: 14px; color: var(--ink-mid); }
.prose table.cns-fasi { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 12px 0 8px; }
.prose table.cns-fasi th, .prose table.cns-fasi td { border-bottom: 1px solid var(--rule); padding: 10px 8px; vertical-align: top; text-align: left; }
.prose table.cns-fasi th { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.prose table.cns-fasi td:first-child { font-weight: 600; color: var(--blue); white-space: nowrap; }
.prose table.cns-fasi td:last-child { color: var(--ink-mid); font-size: 13.5px; }
@media screen { .prose table.cns-fasi td:last-child { font-size: 14px; } } /* corpo minimo a schermo (nota REGIA A4, 10/10/2026); la stampa resta com'era */
@media (max-width: 700px) {
  .prose table.cns-fasi, .prose table.cns-fasi tbody, .prose table.cns-fasi tr, .prose table.cns-fasi td { display: block; width: 100%; }
  .prose table.cns-fasi thead { display: none; }
  .prose table.cns-fasi tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .prose table.cns-fasi td { border: 0; padding: 3px 0; }
}
/* Home ②: dai quattro passaggi alle sei fasi, con il caso reale (09/10/2026) */
.metodo-fasi { margin: 18px 0 0; max-width: 78ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }
.metodo-fasi a { font-weight: 600; color: #9C4620; white-space: nowrap; }
.metodo-fasi a:hover { color: var(--orange); }

/* ==========================================================================
   HOME PUBBLICA — correttivi del piano di lavoro REGIA (10/10/2026, Romolo:
   «esegui i correttivi e le migliorie che ritieni fondate»).
   A3 menu sul telefono · A2 riquadro Affidabilità sul telefono · A4 testi da
   leggere almeno a 14 px nella home (le etichette restano più piccole, mai
   sotto 12 px; i disegni «Esempio illustrativo» restano come sono) · B1
   esempi di «Prova con» con il loro tipo. Il grigio --ink-muted è stato
   scurito in :root (vale per tutto il sito).
   ========================================================================== */

/* B1 — «Prova con: una normativa [D.P.R. 380/2001] · un tema [agibilità] · un'attività [CTU]» */
.hero-v2-esempi { font-size: 14px; color: rgba(255,255,255,.78); }
.hero-v2-esempio { display: inline-flex; align-items: center; gap: 6px; }
.hero-v2-esempio-tipo { color: rgba(255,255,255,.78); }
.hero-v2-esempi a { font-size: 14px; }

/* A4 — testi da leggere nella home pubblica */
.home .hero-v2 .go2 { font-size: 15px; }
.home .method-card .eyebrow { font-size: 12.5px; }
.home .method-card p.body { font-size: 14.5px; color: var(--text-on-dark); }
.home .hero-v2-metodo { font-size: 14px; }
.home .hero-cred-text, .home .hero-v2 .hero-v2-cred .hero-cred-text { font-size: 13px; color: rgba(255,255,255,.78); }
.home .anchors-etichetta { font-size: 12.5px; }
.home .page-stick a.anchor { font-size: 14px; padding: 12px 13px; }
.home .ui-nota { font-size: 13.5px; }
.home .ui-ponte, .home .see-all { font-size: 14px; }
.home .ui-data { font-size: 13px; }
.home .ui-tipo { font-size: 12.5px; }
.home .ui-anteprima { font-size: 14px; }
.home .qp-tit { font-size: 14px; }
/* il box dei quattro punti è un indice: voci a 14 px, righe brevi a 13,5 px, per non perdere la compattezza dello schizzo di Romolo */
.home .qp-testo strong { font-size: 14px; }
.home .qp-testo span { font-size: 13.5px; line-height: 1.4; }
.home .pres-eyebrow, .home .exdemo-eyebrow { font-size: 12.5px; }
.home .home-tipo-vai { font-size: 14px; }
.home .nv-conteggio { font-size: 14px; }
.home .exdemo-artnum { font-size: 14.5px; }
.home .exdemo-badge { font-size: 12.5px; }
.home .nv-dagli, .home .nv-dagli .k { font-size: 14px; }
.home .nv-norma-segui, .home .nv-chiusura { font-size: 15px; }
.home .hub-center-lbl { font-size: 12.5px; }
.home .hub-badge { font-size: 13px; }
.home #metodo .n { font-size: 13px; }
.home #metodo p { font-size: 15px; }
.home #su-misura .su-misura-nota { font-size: 14.5px; }
.home .gioiello-desc { font-size: 15px; }
.home .gioiello-btn, .home #piani .btn-primary { font-size: 14px; }
.home .aree-sub { font-size: 15px; }
.home #aree .n { font-size: 12.5px; }
.home #aree p { font-size: 14px; }
.home #aree span, .home #aree a { font-size: 14px; }
.home .chi-intro-lbl, .home .cred-role { font-size: 13.5px; }
.home #chi-siamo p { font-size: 15px; }
.home .cred-anniv { font-size: 13px; }
.home .piano-tag { font-size: 12.5px; }
.home .piano-desc, .home .piano-plus, .home .piani-nota-convenzioni { font-size: 14px; }
.home .sme-didascalia { font-size: 12.5px; }

/* A2 — riquadro «Affidabilità dei contenuti» sul telefono: tre righe e «Leggi tutto» */
.hero-v2-piu { display: none; }
@media (max-width: 600px) {
  .home .method-card p.body#hero-affidabilita-testo:not(.is-aperto) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .hero-v2-piu { display: inline-block; margin: 0 18px 12px 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--rust-on-dark); background: none; border: 0; text-decoration: underline; cursor: pointer; }
  .hero-v2-piu:focus-visible { outline: 2px solid var(--rust-on-dark); outline-offset: 2px; }
}

/* A3 — menu sul telefono: nessuna voce nascosta a destra.
   Barra del visitatore (tutte le pagine): le voci vanno a capo su due righe e
   riempiono la larghezza; la lente non è più «appiccicata» al bordo.
   Menu di pagina della home: tolto sotto i 600 px (sul telefono si scorre la
   pagina; il box dei quattro punti fa da indice). */
@media (max-width: 600px) {
  .nv-barra-inner { flex-wrap: wrap; overflow: visible; padding-left: 0; padding-right: 0; }
  .nv-barra-inner > .nv-voce, .nv-barra-inner > .nv-aree { flex: 1 1 auto; }
  .nv-barra-inner > .nv-aree .nv-voce { flex: 1 1 auto; }
  .nv-voce { justify-content: center; min-height: 44px; padding: 0 10px; border-top: 1px solid var(--rule); }
  .nv-lente { position: static; box-shadow: none; margin-left: 0; flex: 0 0 auto; }
  .home .page-stick { display: none; }
}

/* Etichette ancora sotto i 12 px o sotto contrasto (verifica del 10/10/2026) */
.topbar-progetto-sep + span { font-size: 12.5px; }
.nv-etichetta { font-size: 12.5px; }
.su-misura .pres-eyebrow { color: var(--orange-dark); } /* l'arancio su --blue-lt era 4,2:1 */

/* ==========================================================================
   Striscia «La conoscenza che orienta il tuo lavoro» sotto il box dei quattro
   punti (disegno di Romolo, 10/10/2026, seconda versione). Misura fissata sullo
   spazio libero della colonna: 400 × 88 px (340 × 70 tra 901 e 1100 px), così la
   colonna finisce con la lista. Faro come sfondo a destra (media 5765, ritaglio
   dell'originale 5766), testi veri a sinistra: titolo e collegamento; la frase
   di sostegno compare solo dove c'è spazio (tablet, a tutta larghezza).
   ========================================================================== */
.valore-banner { position: relative; display: flex; align-items: center; height: 88px; padding: 0 16px; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: #FCFBF9 var(--vb-img) no-repeat right center / auto 100%; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: box-shadow .2s, border-color .2s; }
.valore-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FCFBF9 0%, #FCFBF9 62%, rgba(252,251,249,0) 82%); pointer-events: none; }
.valore-banner .vb-testo { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; max-width: 74%; }
.vb-tit { font-family: var(--serif); font-size: 17px; line-height: 1.15; font-weight: 600; color: var(--blue); }
.vb-sub { display: none; }
.vb-link { align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--orange); border-bottom: 1.5px solid var(--orange); line-height: 1.3; }
.valore-banner:hover, .valore-banner:focus-visible { border-color: var(--orange); box-shadow: var(--shadow-md); }
.valore-banner:hover .vb-link, .valore-banner:focus-visible .vb-link { color: var(--orange-dark); border-bottom-color: var(--orange-dark); }
.valore-banner:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 1100px) and (min-width: 901px) { .valore-banner { height: 70px; padding: 0 12px; } .vb-tit { font-size: 15px; } .vb-link { font-size: 13px; } }
@media (max-width: 900px) {
  .valore-banner { height: auto; min-height: 150px; padding: 22px 28px; }
  .valore-banner::before { background: linear-gradient(90deg, #FCFBF9 0%, #FCFBF9 80%, rgba(252,251,249,0) 94%); }
  .valore-banner .vb-testo { max-width: 72%; gap: 8px; }
  .vb-tit { font-size: 24px; }
  .vb-sub { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-mid); }
  .vb-link { font-size: 15px; }
}
@media (max-width: 600px) {
  .valore-banner { min-height: 104px; padding: 14px 16px; }
  .valore-banner .vb-testo { max-width: 70%; }
  .vb-tit { font-size: 18px; }
  .vb-sub { display: none; }
  .vb-link { font-size: 14px; }
}

/* Quattro punti: disegni in filigrana più leggibili (Romolo, 10/10/2026). Il testo sta a
   sinistra su una sfumatura chiara; il disegno occupa la metà destra, più pieno. */
.qp-cella.has-filigrana { padding: 10px 8px 10px 9px; }
.qp-cella.has-filigrana .home-num { margin-right: 7px; flex-shrink: 0; }
.qp-cella.has-filigrana::after { inset: 0 0 0 auto; width: 58%; height: 100%; background: var(--qp-img) no-repeat 100% 70% / contain; opacity: .82; filter: none; mix-blend-mode: multiply; transform: none; z-index: 0; }
.qp-cella.has-filigrana::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.78) 48%, rgba(255,255,255,0) 76%); }
.qp-cella.has-filigrana > * { position: relative; z-index: 2; }
.qp-cella.has-filigrana .qp-testo { max-width: 72%; }
.qp-cella.has-filigrana:hover::after, .qp-cella.has-filigrana:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 900px) { .qp-cella.has-filigrana::after { width: 44%; } .qp-cella.has-filigrana .qp-testo { max-width: 64%; } }
@media (max-width: 600px) { .qp-cella.has-filigrana { min-height: 92px; } .qp-cella.has-filigrana::after { width: 42%; height: 100%; } .qp-cella.has-filigrana .qp-testo { max-width: 60%; } }

/* Striscia: correttivi della revisione (10/10/2026). Respiro di 24 px dal box dei quattro punti; per
   restare alla pari con la lista la striscia scende a 76 px (62 px tra 901 e 1100, con 20 px di respiro).
   Titolo a capo solo dopo «che»; collegamento a 14 px, più marcato. */
.ui-lato .valore-banner { margin-top: 12px; height: 76px; }
.vb-tit-riga { white-space: nowrap; }
.vb-link { font-size: 14px; font-weight: 700; border-bottom-width: 2px; }
@media (max-width: 1100px) and (min-width: 901px) { .ui-lato .valore-banner { margin-top: 8px; height: 62px; } .vb-link { font-size: 13.5px; } }
@media (max-width: 900px) { .ui-lato .valore-banner { margin-top: 8px; height: auto; } .vb-link { font-size: 15px; } .vb-tit-riga { white-space: normal; } }
@media (max-width: 600px) { .vb-tit-riga { white-space: nowrap; } }

/* Striscia «La conoscenza che orienta il tuo lavoro» come immagine di Romolo (10/10/2026): annulla altezza, sfondo e testi della versione HTML */
.valore-banner.valore-banner-img { display: block; height: auto !important; min-height: 0 !important; padding: 0 !important; box-shadow: none; background: none; border: 0; border-radius: 10px; overflow: hidden; }
.valore-banner.valore-banner-img::before, .valore-banner.valore-banner-img::after { content: none; }
.valore-banner-img img { display: block; width: 100%; height: auto; }
.valore-banner-img:hover img { filter: brightness(1.02); }
.valore-banner-img:focus-visible { outline: 3px solid var(--orange-dark, #B4501A); outline-offset: 2px; }

/* Ultimi inserimenti a misura fissa (Romolo, 10/10/2026: la lista non deve cambiare altezza con la lunghezza dei titoli).
   Ogni titolo occupa sempre due righe (i più lunghi finiscono con «…», il titolo intero nel tooltip): sei righe = altezza costante.
   Da 1200 px: colonna destra di 400 px; il riquadro bianco della lista si allunga fino alla fine della striscia, che sta in fondo alla colonna (stacco minimo 24 px).
   Sotto 1200 px: lista a tutta larghezza e box sotto (prima tra 901 e 1200 i titoli si riducevano a una colonna di 80-180 px, fino a 12 righe). */
.ui-titolo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (min-width: 1200px) {
  .ui-griglia { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: stretch; }
  .ui-titolo { min-height: 2.8em; }
  .ui-lista { display: flex; flex-direction: column; }
  .ui-lista .ui-elenco { flex: 1; }
  .ui-lato { gap: 0; }
  .ui-lato .quattro-punti { margin-bottom: 24px; }
  .ui-lato .valore-banner { margin-top: auto; }
}
@media (max-width: 1199px) {
  .ui-griglia { grid-template-columns: 1fr; gap: 20px; }
  .ui-lato .valore-banner { margin-top: 8px; }
  .ui-lato .valore-banner-img { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; } /* a tutta larghezza sarebbe alta fino a 200 px */
}

/* Quattro punti a righe (Romolo, 10/10/2026): ogni riga del testo resta intera (va a capo solo dove l'ha deciso lui);
   nella colonna di 400 px la riga più lunga («e articolo normativo») passa sopra il disegno, schiarito dalla sfumatura. */
.qp-cella.has-filigrana .qp-testo { max-width: none; }
.qp-cella.has-filigrana .qp-testo span { white-space: nowrap; }
@media (min-width: 1200px) { .home .qp-testo span { font-size: 13px; } }
/* Da 1200 px il box dei quattro punti riempie lo spazio sopra la striscia (stacco sempre 24 px): se i testi del box cambiano, le celle si allargano in altezza invece di lasciare un vuoto. */
@media (min-width: 1200px) {
  .ui-lato .quattro-punti { flex: 1; display: flex; flex-direction: column; }
  .ui-lato .qp-griglia { flex: 1; grid-auto-rows: 1fr; }
  .ui-lato .valore-banner { margin-top: 0; }
}

/* Nota REGIA 10/10/2026, A2: sul telefono il box Affidabilità mostra solo il titolo e «Il metodo →»;
   il testo resta nella pagina, nascosto alla vista ma letto dai lettori di schermo. */
@media (max-width: 600px) {
  .hero-v2-piu { display: none !important; }
  .home .method-card p.body#hero-affidabilita-testo { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Nota REGIA 10/10/2026, A3: sotto 1100 px il menu di pagina non sta su una riga (prima: fila tagliata senza segnale,
   e sul telefono era nascosto). Diventa un menu a tendina «Menu di pagina» con tutte le voci, anche da tastiera. */
.anchors-tendina { display: none; }
@media (max-width: 1099px) {
  .home .page-stick { display: block; }
  .page-stick .anchors { display: none; }
  .anchors-tendina { display: block; position: relative; }
  .anchors-tendina > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
  .anchors-tendina > summary::-webkit-details-marker { display: none; }
  .anchors-tendina > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--orange-dark); border-bottom: 2px solid var(--orange-dark); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
  .anchors-tendina[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .anchors-tendina > summary:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
  .anchors-tendina > nav { position: absolute; top: 100%; left: 0; z-index: 60; display: flex; flex-direction: column; min-width: 240px; padding: 6px 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-md); }
  .anchors-tendina > nav a { padding: 11px 18px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
  .anchors-tendina > nav a:hover, .anchors-tendina > nav a:focus-visible { background: var(--orange-lt); color: var(--orange-dark); outline: none; }
}
@media (max-width: 600px) { /* sul telefono il menu principale va su due righe: le sezioni arrivano sotto le barre fisse */
  .home :is(#ultimi-inserimenti, #cosa-trovi, #norma-vetrina, #metodo, #su-misura, #proponi, #chi-siamo, #piani) { scroll-margin-top: 220px; }
}

/* Nota REGIA A4 (10/10/2026): metadati ed etichette dei token al corpo minimo, solo a schermo */
@media screen { :root { --fs-caption: 0.875rem; --fs-label: 0.78125rem; } }

/* Nota REGIA A4 (10/10/2026): contrasti sotto 4,5:1 misurati sul vero.
   Arancio del sito sul blu scuro (2,3:1) → arancio per fondi scuri (5,6:1); «Sei in» sul blu (2,1:1) → bianco al 70%;
   etichetta «riservato utenti» ambra su ambra chiaro (2,8:1) → ambra scura (5,1:1). Solo a schermo: in stampa il fondo è bianco. */
@media screen {
  .hero-kicker, .norma-header .nh-sigla, .prose blockquote.cit-frammenti p.cit-omissis { color: var(--rust-on-dark); }
  .bc-prefisso, .search-hero .bc-prefisso { color: rgba(255,255,255,.72); }
  .cs-tag-priv { color: #8A5A12; }
}
@media screen { /* testi da leggere del piè di pagina e nota sull'uso dell'IA: 14 px (nota REGIA A4) */
  .footer-tagline, .footer-nota-autore, .nota-ia { font-size: 14px; }
}
@media screen { /* contrasti con trasparenze, misurati sul vero (nota REGIA A4) */
  .footer-col-title, .footer-credenziali { color: rgba(255,255,255,.72); }
  .fc-badge .fc-n { opacity: 1; }
  .prest-tag.is-arrivo i { opacity: 1; }
}

/* Testo integrale conservato in Accademia, quando la sentenza non è linkabile online (11/10/2026). */
.testo-conservato > summary { cursor: pointer; list-style: none; }
.testo-conservato > summary::-webkit-details-marker { display: none; }
.testo-conservato > summary::after { content: "Apri il testo \25BE"; display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--orange); }
.testo-conservato[open] > summary::after { content: "Chiudi il testo \25B4"; }
@media print { .testo-conservato > summary::after { content: none; } }
/* Avvertenza sotto il link alla fonte nelle sentenze della Cassazione (11/10/2026). */
.side-row.sr-nota { display: block; color: var(--ink-muted); line-height: 1.45; font-style: italic; }

/* Richiesta di avviso finché la sottoscrizione non è attiva (03/11/2026) */
.sott-avvisami { max-width: 640px; margin: 0 auto 32px; padding: 24px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; }
.sott-avvisami h2 { margin: 0 0 8px; }
.sott-avvisami p { margin: 0 0 12px; }
.sott-avvisami label { display: block; margin-bottom: 4px; font-weight: 600; }
.sott-avvisami-riga { display: flex; gap: 8px; flex-wrap: wrap; }
.sott-avvisami-riga input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 1px solid #999; border-radius: 4px; font: inherit; }
.sott-avvisami-nota { margin: 12px 0 0 !important; font-size: .875em; }
.sott-avvisami-errore { padding: 8px 12px; border-left: 3px solid #b3261e; color: #b3261e; }

/* Immagine nella hero delle aree e della home riservata, al posto del Radar (Romolo, 04/11/2026).
   Al telefono non compare: la hero resta essenziale. */
.hero-immagine { width: 100%; border-radius: var(--radius-lg); overflow: hidden; }
.hero-immagine img { display: block; width: 100%; height: auto; }
/* Stessa larghezza della colonna destra (Romolo, 04/11/2026): nelle aree le stesse proporzioni di .area-hub-grid, nella home i 300 px di .ricerca-grid. */
@media (min-width: 901px) { .area-hero-radar .hub-hero-griglia { grid-template-columns: 7fr 3fr; gap: 32px; } }
@media (min-width: 901px) { .search-hero-v1 .at-container.search-hero-griglia { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) { .hero-immagine { display: none; } }

/* ── Fascia delle domande sotto la hero (REGIA doc. 42, Romolo 07/11/2026) ── */
.fascia-domande { background: var(--surface, #F5F6F4); border-bottom: 1px solid var(--rule, #D8DAD3); padding: 34px 0 30px; }
.fascia-domande .fd-occhiello { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--orange); margin: 0 0 6px; }
.fascia-domande .fd-titolo { font-family: var(--serif, 'Source Serif 4', Georgia, serif); font-size: 26px; line-height: 1.25; color: var(--blue, #1A3A5C); margin: 0 0 20px; text-wrap: balance; } /* senza larghezza massima: su schermo largo sta su una riga (Romolo 07/11) */
.fascia-domande .fd-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fascia-domande .fd-scheda { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--rule, #D8DAD3); border-radius: 8px; padding: 18px 18px 16px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.fascia-domande .fd-scheda:hover, .fascia-domande .fd-scheda:focus-visible { border-color: var(--orange); box-shadow: 0 4px 14px rgba(22,33,62,.08); }
.fascia-domande .fd-domanda { font-family: var(--serif, 'Source Serif 4', Georgia, serif); font-size: 17.5px; line-height: 1.35; color: var(--ink, #16213E); flex: 1; }
.fascia-domande .fd-vai { font-size: 13.5px; font-weight: 600; color: var(--orange); }
.fascia-domande .fd-nota { font-size: 14px; color: var(--ink-muted, #5a6478); margin: 18px 0 0; line-height: 1.6; }
.fascia-domande .fd-nota + .fd-nota { margin-top: 4px; }
.fascia-domande .fd-invito { color: var(--orange); }
@media (max-width: 900px) { .fascia-domande .fd-griglia { grid-template-columns: 1fr; } .fascia-domande .fd-titolo { font-size: 22px; } }

/* ── Hero: riga sul metodo sotto il claim (REGIA doc. 44, Romolo 07/11/2026), colore accento per fondo scuro ── */
.at .hero-v5-metodo { font-family: var(--sans, 'IBM Plex Sans', system-ui, sans-serif); font-size: 16px; font-weight: 600; letter-spacing: .01em; color: var(--rust-on-dark); margin: 2px 0 10px; }
@media (max-width: 900px) { .at .hero-v5-metodo { font-size: 15px; } }

/* ── Hero più bassa (Romolo 07/11/2026): le due colonne partono in alto; la paternità è a sinistra, in fondo, in linea con il riquadro ── */
@media (min-width: 901px) {
  .hero-v2-inner { align-items: stretch; }
  .hero-v2 .hero-v2-testo { display: flex; flex-direction: column; }
  .hero-v2 .hero-v2-testo .hero-v2-paternita { margin-top: auto; padding-top: 14px; }
  .hero-v2 .hero-v2-lato { display: flex; flex-direction: column; }
  .hero-v2 .hero-v2-lato .hero-v2-box { flex: 1; }
}