/* ============================================================
   NOTAG BASE — LAYOUT
   Le strutture di pagina: header, footer, hero, scheda progetto,
   showroom. Usa i token e i componenti, non ridichiara niente.
   ============================================================ */

/* ============================================================
   HEADER
   Barra fissa, trasparente sull'apertura scura, solida dopo lo
   scroll, che si nasconde scendendo e riappare risalendo.
   ============================================================ */
.nt-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:900;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform var(--nt-tempo-l) var(--nt-ease), background-color .3s var(--nt-ease), border-color .3s var(--nt-ease);
}
.nt-header.is-solida{
  background:var(--nt-velo);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--nt-riga-scura);
}
.nt-header.is-nascosta{ transform:translateY(-110%); }
body.admin-bar .nt-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .nt-header{ top:46px; } }

.nt-header__riga{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nt-space-5);
  max-width:var(--nt-max);
  margin-inline:auto;
  padding:18px var(--nt-gutter);
  transition:padding .3s var(--nt-ease);
}
.nt-header.is-solida .nt-header__riga{ padding-block:10px; }

.nt-header__logo{ display:block; line-height:0; background-image:none; }
.nt-header__logo img{ height:clamp(34px,4vw,42px); width:auto; transition:height .3s var(--nt-ease); }
.nt-header.is-solida .nt-header__logo img{ height:30px; }
.nt-header__logo-testo{
  font-family:var(--nt-display);
  font-size:1.125rem;
  letter-spacing:var(--nt-ls-titolo);
  color:#fff;
}

/* Voci desktop */
.nt-nav{ display:none; }
@media (min-width:900px){
  .nt-nav{ display:block; }
  .nt-menu{
    display:flex;
    align-items:center;
    gap:clamp(22px,2.6vw,40px);
    list-style:none;
    margin:0;
    padding:0;
  }
  .nt-menu li{ margin:0; }
  .nt-menu a{
    font-family:var(--nt-testo);
    font-weight:600;
    font-size:.9375rem;
    color:#fff;
    opacity:.85;
    padding:10px 2px;
    display:inline-block;
  }
  .nt-menu a:hover{ opacity:1; }
  .nt-menu .current-menu-item > a::before,
  .nt-menu .current_page_item > a::before,
  .nt-menu .current-menu-ancestor > a::before{
    content:'';
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--nt-rosso);
    margin-right:8px;
    vertical-align:2px;
  }
  /* La voce Contatti diventa cartellino: la riconosce il CSS, non una classe da mettere a mano */
  .nt-menu .nt-voce-cta > a{
    background-color:var(--nt-rosso);
    background-image:none;
    opacity:1;
    padding:10px 20px;
    border-radius:var(--nt-raggio);
  }
  .nt-menu .nt-voce-cta > a:hover{ background-color:var(--nt-rosso-scuro); transform:rotate(var(--nt-tilt)); }
}

/* Hamburger */
.nt-hamburger{
  display:block;
  width:44px; height:44px;
  position:relative;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:1002;
}
@media (min-width:900px){ .nt-hamburger{ display:none; } }
.nt-hamburger span,
.nt-hamburger::before,
.nt-hamburger::after{
  content:'';
  position:absolute;
  left:50%;
  width:26px; height:2px;
  background:#fff;
  transform:translateX(-50%);
  transition:transform var(--nt-tempo) var(--nt-ease), top var(--nt-tempo) var(--nt-ease), opacity var(--nt-tempo) var(--nt-ease);
}
.nt-hamburger::before{ top:calc(50% - 5px); }
.nt-hamburger::after{ top:calc(50% + 5px); }
.nt-hamburger span{ opacity:0; top:50%; }
body.nt-menu-aperto .nt-hamburger::before{ top:50%; transform:translateX(-50%) rotate(45deg); }
body.nt-menu-aperto .nt-hamburger::after{ top:50%; transform:translateX(-50%) rotate(-45deg); }

/* Overlay mobile */
.nt-overlay{
  position:fixed;
  inset:0;
  background:var(--nt-nero);
  padding:110px var(--nt-gutter) 40px;
  overflow-y:auto;
  z-index:1001;
  display:none;
  counter-reset:ntvoce;
}
body.nt-menu-aperto .nt-overlay{ display:block; animation:nt-entra .3s var(--nt-ease) both; }
@keyframes nt-entra{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.nt-overlay ul{ list-style:none; margin:0; padding:0; }
.nt-overlay a{
  display:block;
  font-family:var(--nt-display);
  font-size:clamp(2rem,9vw,3.25rem);
  line-height:1.1;
  letter-spacing:var(--nt-ls-titolo);
  color:#fff;
  padding:18px 0;
  border-bottom:1px solid var(--nt-riga-scura);
  background-image:none;
}
.nt-overlay a::before{
  counter-increment:ntvoce;
  content:"0" counter(ntvoce);
  font-family:var(--nt-meta);
  font-size:.8125rem;
  letter-spacing:var(--nt-ls-meta);
  color:var(--nt-rosso);
  margin-right:16px;
  vertical-align:14px;
}
.nt-overlay__firma{
  margin-top:36px;
  font-family:var(--nt-meta);
  font-size:.75rem;
  letter-spacing:var(--nt-ls-firma);
  text-transform:uppercase;
  color:var(--nt-fumo);
}
body.nt-menu-aperto{ overflow:hidden; }

/* ============================================================
   HERO
   ============================================================ */
.nt-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(420px,62vh,720px);
  /* superficie scura: titoli e testi dentro la hero leggono da qui */
  --nt-fondo:var(--nt-nero);
  --nt-inchiostro:var(--nt-carta);
  --nt-inchiostro-2:var(--nt-fumo-chiaro);
  --nt-bordo:var(--nt-riga-scura);
  background:var(--nt-nero);
  color:var(--nt-carta);
  padding:clamp(150px,18vh,220px) 0 var(--nt-space-8);
  overflow:hidden;
}
.nt-hero__media{
  position:absolute;
  inset:0;
}
.nt-hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.5;
}
/* Velo scuro: garantisce che il titolo si legga anche su una foto
   chiara o su un logo su fondo bianco. */
.nt-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.35) 35%, rgba(14,14,14,.97) 100%),
    linear-gradient(90deg, rgba(14,14,14,.8) 0%, rgba(14,14,14,.1) 70%);
  pointer-events:none;
}
.nt-hero__contenuto{
  position:relative;
  z-index:1;
  max-width:var(--nt-max);
  margin-inline:auto;
  padding-inline:var(--nt-gutter);
}
.nt-hero__eti{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-rosso);
  margin:0 0 var(--nt-space-4);
}
.nt-hero__titolo{
  font-family:var(--nt-display);
  font-size:var(--nt-size-display);
  line-height:.98;
  letter-spacing:var(--nt-ls-display);
  margin:0;
  max-width:18ch;
}
.nt-hero__sottotitolo{
  margin-top:var(--nt-space-5);
  max-width:56ch;
  font-size:var(--nt-size-corpo-g);
  color:var(--nt-fumo-chiaro);
}

/* ---------- Hero a riquadro ----------
   Metà dei progetti non ha una fotografia in apertura: ha un marchio,
   un mockup, una schermata. Messi a tutta pagina verrebbero tagliati e
   affogati dal velo scuro. Qui l'immagine sta in un riquadro chiaro,
   intera, accanto al titolo: si legge per quello che è. */
.nt-hero--riquadro{
  align-items:center;
  padding-block:clamp(130px,16vh,190px) clamp(3rem,6vh,5rem);
}
.nt-hero--riquadro::after{ content:none; }
.nt-hero--riquadro .nt-hero__contenuto{
  width:100%;
  display:grid;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
  grid-template-columns:1fr;
}
.nt-hero__riquadro{
  background:var(--nt-carta);
  border-radius:var(--nt-raggio);
  padding:clamp(1.25rem,3vw,2.5rem);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(200px,28vh,320px);
}
.nt-hero__riquadro img{
  width:100%;
  height:auto;
  max-height:clamp(200px,34vh,380px);
  object-fit:contain;
}
@media (min-width:900px){
  .nt-hero--riquadro .nt-hero__contenuto{ grid-template-columns:1.05fr 1fr; }
  .nt-hero--riquadro .nt-hero__titolo{ max-width:14ch; }
}

/* ============================================================
   SCHEDA PROGETTO
   ============================================================ */
.nt-scheda__fascia{ background:var(--nt-nero); color:var(--nt-carta); }
.nt-scheda__fascia .nt-fascia{ border-color:var(--nt-riga-scura); }
.nt-scheda__fascia dt{ color:var(--nt-fumo-chiaro); }

.nt-video{
  position:relative;
  padding-top:56.25%;
  border-radius:var(--nt-raggio);
  overflow:hidden;
  background:var(--nt-nero);
}
.nt-video iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}
.nt-video-lista{
  display:grid;
  gap:var(--nt-space-6);
}

.nt-full{
  margin-block:var(--nt-sezione-y);
}
/* Anche a tutta pagina l'immagine non si taglia: tiene le sue
   proporzioni dentro una fascia del colore del riquadro. */
.nt-full img{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  background:var(--nt-riquadro);
}

.nt-tecnica{
  display:grid;
  gap:var(--nt-space-6);
  grid-template-columns:1fr;
}
@media (min-width:780px){
  .nt-tecnica{ grid-template-columns:repeat(2, 1fr); gap:var(--nt-space-7); }
}

/* Firma dello studio da cui viene il progetto: il filone museale
   porta il marchio Fabrica Ludens, dichiarato qui e non nelle immagini. */
.nt-firma-studio{
  margin-top:var(--nt-space-7);
  padding-top:var(--nt-space-5);
  border-top:1px solid var(--nt-bordo);
  max-width:34rem;
}
.nt-firma-studio img,
.nt-firma-studio__marchio{
  display:block;
  width:auto;
  height:auto;
  max-width:250px;
  opacity:.85;
}
.nt-firma-studio__nota{
  margin-top:var(--nt-space-4);
  font-size:.875rem;
  line-height:1.5;
  color:var(--nt-inchiostro-2);
}

/* ============================================================
   PAGINE DI TESTO: METODO E STUDIO
   ============================================================ */

/* Hero senza fotografia: stesso titolo della hero, meno altezza. */
.nt-hero--pagina{
  min-height:clamp(380px,56vh,620px);
  padding-block:var(--nt-space-10) var(--nt-space-9);
}
.nt-hero--pagina::after{ display:none; }
.nt-hero--pagina .nt-hero__sottotitolo{ max-width:62ch; }

/* Le cinque fasi (0.13.0): il ciclo a sinistra, fermo mentre si scorre,
   le fasi a destra. Sotto i 980 px il ciclo sta in cima, una volta sola. */
.nt-metodo{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--nt-space-7);
}
@media (min-width:980px){
  .nt-metodo{ grid-template-columns:minmax(300px,400px) 1fr; gap:clamp(3rem,6vw,6rem); }
  .nt-ciclo{ position:sticky; top:calc(var(--nt-space-9) + env(safe-area-inset-top,0px)); align-self:start; }
}
.nt-ciclo__disegno{ display:block; width:100%; max-width:420px; height:auto; margin:var(--nt-space-4) auto 0; }
.nt-ciclo__disegno:empty{ display:none; }
.nt-ciclo .nodo{ cursor:pointer; }
.nt-ciclo .nodo circle{ fill:var(--nt-carta); stroke:var(--nt-nero); stroke-width:1.5; transition:fill var(--nt-tempo-l), stroke var(--nt-tempo-l); }
.nt-ciclo .nodo .n{ font-family:var(--nt-display); font-size:17px; fill:var(--nt-nero); transition:fill var(--nt-tempo-l); }
.nt-ciclo .nodo .l{ font-family:var(--nt-meta); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; fill:var(--nt-fumo); transition:fill var(--nt-tempo-l); }
.nt-ciclo .nodo.attivo circle{ fill:var(--nt-rosso); stroke:var(--nt-rosso); }
.nt-ciclo .nodo.attivo .n{ fill:#fff; }
.nt-ciclo .nodo.attivo .l{ fill:var(--nt-nero); }
.nt-ciclo .nodo:focus-visible circle{ stroke:var(--nt-blu); stroke-width:3; }
.nt-ciclo .arco{ fill:none; stroke:var(--nt-nero); stroke-width:1.5; }
.nt-ciclo .arco--ritorno{ stroke:var(--nt-rosso); stroke-dasharray:5 5; }
.nt-ciclo .centro{ font-family:var(--nt-display); font-size:21px; fill:var(--nt-nero); letter-spacing:-.02em; }

.nt-fasi{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--nt-bordo);
}
.nt-fasi__voce{
  margin:0;
  padding-block:var(--nt-space-7);
  border-bottom:1px solid var(--nt-bordo);
  scroll-margin-top:var(--nt-space-9);
}
.nt-fasi__testa{ display:flex; align-items:baseline; gap:var(--nt-space-5); flex-wrap:wrap; }
.nt-fasi__numero{
  font-family:var(--nt-display);
  font-size:clamp(2.5rem,1.5rem + 3.5vw,4rem);
  line-height:1;
  letter-spacing:var(--nt-ls-display);
  color:var(--nt-rosso);
}
.nt-fasi__titolo{ margin:0; }
.nt-fasi__testo{ max-width:62ch; margin:var(--nt-space-5) 0 0; }
.nt-fasi__ritorno{ margin:var(--nt-space-6) 0 0; }
.nt-fasi__ritorno a{
  font-family:var(--nt-meta); font-size:var(--nt-size-meta); letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase; color:var(--nt-rosso); background-size:100% 1px;
}

/* 01 · Analisi: lo stesso metodo in tre campi */
.nt-campi{
  list-style:none; padding:0; margin:var(--nt-space-6) 0 0;
  display:grid; gap:var(--nt-space-5); grid-template-columns:1fr;
}
@media (min-width:700px){ .nt-campi{ grid-template-columns:repeat(3,1fr); } }
.nt-campi li{ margin:0; border-top:2px solid var(--nt-inchiostro); padding-top:var(--nt-space-3); }
.nt-campi .nt-meta{ color:var(--nt-inchiostro); font-weight:700; }
.nt-campi p{ margin:var(--nt-space-2) 0 0; font-size:.97rem; line-height:1.55; color:var(--nt-inchiostro-2); }
.nt-campi p.nt-meta{ margin:0; }

/* Il cartellino appeso (template-parts/cartellino-appeso.php) */
.nt-appeso{ position:relative; margin-top:var(--nt-space-7); max-width:560px; padding-top:34px; }
.nt-appeso__cordino{ position:absolute; top:0; left:50%; width:2px; height:48px; margin-left:-1px; background:var(--nt-rosso); z-index:2; }
.nt-appeso__cartellino{
  position:relative;
  background:var(--nt-carta-calda);
  color:var(--nt-nero);
  padding:2.1rem 1.6rem 1.4rem;
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%,0 22px);
  transform:rotate(-.8deg);
  transform-origin:50% 0;
  transition:transform var(--nt-tempo-l) var(--nt-ease);
}
.nt-fasi__voce:nth-child(even) .nt-appeso__cartellino{ transform:rotate(.7deg); }
.nt-appeso:hover .nt-appeso__cartellino{ transform:rotate(0); }
.nt-appeso__foro{ position:absolute; top:10px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--nt-fondo); }
.nt-appeso__etichetta{ margin-bottom:var(--nt-space-2); }
.nt-appeso__testo{ margin:0; font-size:1rem; line-height:1.55; }
.nt-scuro .nt-appeso__cartellino{ background:var(--nt-carta); }
@media (min-width:860px){ .nt-due-colonne > .nt-appeso{ margin-top:0; } }

/* Come si comincia, e i quattro mestieri: griglie di voci numerate. */
.nt-passi,
.nt-mestieri{
  list-style:none;
  margin:var(--nt-space-8) 0 0;
  padding:0;
  display:grid;
  gap:var(--nt-space-6);
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .nt-passi, .nt-mestieri{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1100px){
  .nt-passi, .nt-mestieri{ grid-template-columns:repeat(4,1fr); }
}
.nt-passi__voce,
.nt-mestieri__voce{
  padding-top:var(--nt-space-5);
  border-top:1px solid var(--nt-bordo);
}
.nt-passi__titolo,
.nt-mestieri__titolo{
  margin:var(--nt-space-3) 0 var(--nt-space-3);
  font-size:1.25rem;
  line-height:1.25;
}
.nt-passi__voce p,
.nt-mestieri__voce p{ margin:0; color:var(--nt-inchiostro-2); }

/* Le regole di casa: tre colonne. */
.nt-regole{
  margin-top:var(--nt-space-8);
  display:grid;
  gap:var(--nt-space-6);
  grid-template-columns:1fr;
}
@media (min-width:860px){ .nt-regole{ grid-template-columns:repeat(3,1fr); gap:var(--nt-space-7); } }
.nt-regole__voce{ padding-top:var(--nt-space-5); border-top:2px solid var(--nt-rosso); }
.nt-regole__titolo{ margin:0 0 var(--nt-space-3); font-size:1.25rem; line-height:1.25; }
.nt-regole__voce p{ margin:0; }

/* Studio (0.13.0) */

/* Le etichette che ci siamo tolti, barrate in rosso */
.nt-tolte{ display:flex; flex-wrap:wrap; gap:var(--nt-space-3) var(--nt-space-4); list-style:none; margin:var(--nt-space-6) 0 0; padding:0; }
.nt-tolte li{
  position:relative; margin:0;
  font-family:var(--nt-meta); font-size:var(--nt-size-meta); letter-spacing:var(--nt-ls-meta); text-transform:uppercase;
  color:var(--nt-inchiostro-2); background:var(--nt-riquadro);
  padding:.55rem .95rem .55rem 1.6rem;
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
}
.nt-tolte li::before{ content:""; position:absolute; left:12px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--nt-fondo); }
.nt-hero .nt-tolte li{ background:var(--nt-superficie-scura); }
.nt-tolte s{ text-decoration:none; background:linear-gradient(var(--nt-rosso),var(--nt-rosso)) 0 55% / 100% 2px no-repeat; }

/* Le due lezioni dei musei */
.nt-lezioni{ list-style:none; margin:var(--nt-space-5) 0 0; padding:0; display:grid; gap:var(--nt-space-5); }
.nt-lezioni li{ margin:0; border-top:2px solid var(--nt-inchiostro); padding-top:var(--nt-space-3); }
.nt-lezioni .nt-meta{ color:var(--nt-inchiostro); font-weight:700; margin:0; }
.nt-lezioni p{ margin:var(--nt-space-2) 0 0; }

/* L'elenco dei musei, con il link alla scheda dove c'è */
.nt-musei{ list-style:none; margin:0; padding:0; border-top:1px solid var(--nt-bordo); }
.nt-musei li{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:var(--nt-space-4); margin:0; padding:var(--nt-space-3) 0; border-bottom:1px solid var(--nt-bordo); }
.nt-musei__marchio{ width:52px; height:52px; display:grid; place-items:center; background:var(--nt-nero); border-radius:var(--nt-raggio-s); }
.nt-musei__marchio img{ width:40px; height:40px; display:block; }
.nt-musei__nome{ font-family:var(--nt-display); font-size:1.1rem; letter-spacing:-.01em; line-height:1.25; }
.nt-musei__cosa{ display:block; font-family:var(--nt-testo); font-size:.9rem; letter-spacing:0; color:var(--nt-inchiostro-2); margin-top:.15rem; }
.nt-musei__link{ font-family:var(--nt-meta); font-size:.75rem; letter-spacing:var(--nt-ls-meta); text-transform:uppercase; color:var(--nt-rosso); white-space:nowrap; }

/* Non fidatevi: guardate */
.nt-guarda{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--nt-space-6) var(--nt-space-8); }
.nt-guarda p:last-child{ margin:0; }

/* ============================================================
   SHOWROOM
   ============================================================ */
.nt-filtri{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nt-space-2);
  margin-bottom:var(--nt-space-7);
}

/* ============================================================
   BLOG
   ============================================================ */
.nt-articolo__meta{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2);
  margin-bottom:var(--nt-space-4);
}

/* ============================================================
   FOOTER
   ============================================================ */
.nt-footer{
  background:var(--nt-nero);
  color:var(--nt-carta);
  --nt-fondo:var(--nt-nero);
  --nt-inchiostro:var(--nt-carta);
  --nt-inchiostro-2:var(--nt-fumo-chiaro);
  --nt-bordo:var(--nt-riga-scura);
  padding-block:var(--nt-space-9) var(--nt-space-6);
}
.nt-footer__griglia{
  display:grid;
  gap:var(--nt-space-7);
  grid-template-columns:1fr;
}
@media (min-width:780px){
  .nt-footer__griglia{ grid-template-columns:2fr 1fr 1fr; }
}
.nt-footer ul{ list-style:none; margin:0; padding:0; }
.nt-footer li{ margin-bottom:var(--nt-space-2); }
.nt-footer__marchio{
  font-family:var(--nt-display);
  font-size:1.25rem;
  letter-spacing:var(--nt-ls-titolo);
  margin:0;
}
.nt-footer__sedi li{ margin-bottom:var(--nt-space-3); }
.nt-footer__citta{ display:block; font-weight:600; font-size:.9375rem; }
.nt-footer__cap{
  display:block;
  font-family:var(--nt-meta);
  font-size:.75rem;
  letter-spacing:var(--nt-ls-meta);
  color:var(--nt-inchiostro-2);
}
.nt-footer__basso{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nt-space-4);
  justify-content:space-between;
  margin-top:var(--nt-space-8);
  padding-top:var(--nt-space-5);
  border-top:1px solid var(--nt-riga-scura);
}

/* ============================================================
   CTA di chiusura, fascia rossa
   ============================================================ */
.nt-cta-finale{
  background:var(--nt-rosso);
  color:#fff;
  padding-block:var(--nt-sezione-y);
  --nt-fondo:var(--nt-rosso);
  --nt-inchiostro:#fff;
  --nt-inchiostro-2:rgba(255,255,255,.75);
  --nt-bordo:rgba(255,255,255,.25);
}
.nt-cta-finale__titolo{
  font-family:var(--nt-display);
  font-size:var(--nt-size-titolo);
  line-height:1.02;
  letter-spacing:var(--nt-ls-display);
  margin:0 0 var(--nt-space-6);
  max-width:20ch;
}
.nt-cta-finale__titolo span{ color:var(--nt-nero); }
.nt-cta-finale__testo{
  max-width:52ch;
  font-size:var(--nt-size-corpo-g);
  margin:calc(var(--nt-space-6) * -1) 0 var(--nt-space-7);
}
.nt-cta-finale .nt-cartellino{
  background:var(--nt-nero);
  font-size:1.0625rem;
  padding:14px 22px 14px 30px;
}
.nt-cta-finale .nt-cartellino::before{ background:var(--nt-rosso); }
.nt-cta-finale .nt-cartellino:hover{ background:#000; }

/* ============================================================
   HOME — IL MURO DEI LAVORI
   Un piano di cartellini disegnato su canvas. Il titolo sta sopra,
   su una velatura radiale che lo tiene leggibile mentre sotto le
   immagini si muovono. La hero si ferma prima del bordo dello
   schermo, così si capisce che sotto la pagina continua.
   ============================================================ */
.nt-muro{
  position:relative;
  min-height:clamp(520px, 74vh, 860px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--nt-nero-fondo, #0E0E0E);
  color:var(--nt-carta);
  /* superficie scura: quello che sta dentro legge da qui */
  --nt-fondo:var(--nt-nero);
  --nt-inchiostro:var(--nt-carta);
  --nt-inchiostro-2:var(--nt-fumo-chiaro);
  --nt-bordo:var(--nt-riga-scura);
  padding-block:clamp(130px,16vh,190px) clamp(3rem,7vh,5.5rem);
}
/* La barra dell'header è trasparente in cima alla home: sopra un piano
   di immagini chiare non si leggerebbe. Questa velatura le fa da fondo. */
.nt-muro::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:190px;
  z-index:3;
  background:linear-gradient(180deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.55) 45%, rgba(14,14,14,0) 100%);
  pointer-events:none;
}
.nt-muro__piano{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  cursor:grab;
  touch-action:none;
}
.nt-muro__piano--presa{ cursor:grabbing; }

.nt-muro__sopra{
  position:relative;
  z-index:2;
  width:100%;
  text-align:center;
  pointer-events:none;
}
/* La velatura: senza, il titolo bianco cade sopra i cartellini chiari. */
.nt-muro__sopra::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:180vw; height:190%;
  transform:translate(-50%,-50%);
  background:radial-gradient(52% 50% at 50% 50%,
    rgba(14,14,14,.98) 0%,
    rgba(14,14,14,.95) 42%,
    rgba(14,14,14,.74) 66%,
    rgba(14,14,14,0) 88%);
  pointer-events:none;
}
.nt-muro__sopra > *{ position:relative; }

/* Più piccolo del titolo delle schede: qui sotto c'è il lavoro vero e il
   titolo non deve coprirlo, deve lasciarlo vedere. */
.nt-muro__titolo{
  font-family:var(--nt-display);
  font-size:clamp(1.875rem, 1rem + 3.4vw, 3.5rem);
  line-height:1.02;
  letter-spacing:var(--nt-ls-display);
  margin:0 auto;
  max-width:26ch;
  color:var(--nt-carta);
}
.nt-muro__titolo span{ color:var(--nt-rosso); }
.nt-muro__testo{
  margin:var(--nt-space-5) auto 0;
  max-width:36ch;
  font-size:var(--nt-size-corpo-g);
  color:var(--nt-fumo-chiaro);
}
.nt-muro__azioni{
  margin-top:var(--nt-space-7);
  display:flex;
  gap:var(--nt-space-4);
  flex-wrap:wrap;
  justify-content:center;
  pointer-events:auto;
}
.nt-muro__azioni .nt-btn--contorno{ color:var(--nt-carta); border-color:var(--nt-riga-scura); }
.nt-muro__azioni .nt-btn--contorno:hover{ color:var(--nt-rosso); border-color:var(--nt-rosso); }

/* L'etichetta che segue il cartellino sotto il cursore. */
.nt-muro__tocco{
  position:absolute;
  left:0; top:0;
  z-index:5;
  margin:0;
  pointer-events:none;
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  background:var(--nt-rosso);
  color:#fff;
  padding:7px 10px;
  border-radius:var(--nt-raggio-s);
  opacity:0;
  transition:opacity .18s var(--nt-ease);
}
.nt-muro__legenda{
  position:absolute;
  left:var(--nt-gutter); bottom:var(--nt-space-5);
  z-index:3;
  margin:0;
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-fumo-chiaro);
  /* Stesso cartellino scuro dei numeri sulle card: sotto c'è il piano
     che si muove, e un testo nudo lì non si legge mai. */
  background:rgba(14,14,14,.62);
  backdrop-filter:blur(2px);
  padding:5px 10px 4px;
  border-radius:100px;
  pointer-events:none;
}
@media (max-width:640px){
  .nt-muro__legenda{ display:none; }
}

/* ============================================================
   14. HERO — LE ETICHETTE DA TOGLIERE

   Quattro porte leggibili da subito, e sopra ognuna un cartellino
   appeso a un filo, con addosso una parola che ci hanno messo
   addosso. Il cartellino sta sul bordo della card come su un capo
   appeso: si vede che è attaccato, e non copre niente di quello
   che c'è scritto sotto.
   La fisica è in assets/js/etichette.js. Qui c'è solo il disegno,
   più la posizione di ripiego per quando il JavaScript non parte.
   ============================================================ */
.nt-etichette{
  position:relative;
  overflow:hidden;
  background:var(--nt-nero-fondo, #0E0E0E);
  color:var(--nt-carta);
  --nt-fondo:var(--nt-nero);
  --nt-inchiostro:var(--nt-carta);
  --nt-inchiostro-2:var(--nt-fumo-chiaro);
  --nt-bordo:var(--nt-riga-scura);
  min-height:clamp(600px, 88vh, 940px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(130px,16vh,190px) clamp(4.5rem,9vh,7rem);
}
/* La barra dell'header è trasparente sulla home: questa velatura le fa da fondo. */
.nt-etichette::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:170px; z-index:1;
  background:linear-gradient(180deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.5) 50%, rgba(14,14,14,0) 100%);
  pointer-events:none;
}

.nt-etichette__testa{ position:relative; z-index:2; margin-bottom:clamp(2.5rem,6vh,4.5rem); }
.nt-etichette__occhiello{ color:var(--nt-rosso); margin:0 0 var(--nt-space-4); }
.nt-etichette h1{
  font-family:var(--nt-display);
  font-size:clamp(2.125rem, 1rem + 4.4vw, 4.25rem);
  line-height:.98;
  letter-spacing:var(--nt-ls-display);
  margin:0;
  max-width:18ch;
}
.nt-etichette__sotto{ margin:var(--nt-space-5) 0 0; max-width:44ch; color:var(--nt-fumo-chiaro); }

/* ---------- le quattro porte ---------- */
.nt-etichette__banco{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.6vw, 26px);
}
@media (max-width:900px){ .nt-etichette__banco{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .nt-etichette__banco{ grid-template-columns:1fr; } }

.nt-porta{
  position:relative;
  border:1px solid var(--nt-riga-scura);
  border-radius:var(--nt-raggio);
  background:var(--nt-superficie-scura);
  /* La fascia in cima la riempie il cartellino appeso: senza JavaScript
     resta un respiro in più, e non si rompe niente. */
  padding:clamp(4rem,8vh,7.25rem) var(--nt-space-5) var(--nt-space-5);
  min-height:250px;
  display:flex; flex-direction:column;
  transition:border-color var(--nt-tempo) var(--nt-ease), transform var(--nt-tempo) var(--nt-ease);
}
.nt-porta:has(a:hover), .nt-porta:has(a:focus-visible){ border-color:var(--nt-rosso); background:#1F1F1D; }
.nt-porta__numero{ color:var(--nt-rosso); margin:0 0 auto; }
.nt-porta__titolo{
  font-family:var(--nt-display);
  font-size:clamp(1.375rem, 1rem + .9vw, 1.75rem);
  letter-spacing:var(--nt-ls-titolo);
  line-height:1.05;
  margin:var(--nt-space-6) 0 var(--nt-space-3);
}
.nt-porta__titolo a{ color:inherit; text-decoration:none; }
/* il bersaglio del clic è tutta la card, non le due parole del titolo */
.nt-porta__titolo a::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.nt-porta__titolo a:focus-visible{ outline:none; }
.nt-porta:has(a:focus-visible){ outline:2px solid var(--nt-blu); outline-offset:3px; }
.nt-porta__testo{
  margin:0 0 var(--nt-space-5);
  font-size:var(--nt-size-meta);
  line-height:1.5;
  color:var(--nt-fumo-chiaro);
  max-width:28ch;
}
.nt-porta__freccia{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  color:var(--nt-carta);
}
/* quando l'etichetta è stata tolta la porta si accende un momento */
.nt-porta--libera{ border-color:color-mix(in srgb, var(--nt-rosso) 55%, transparent); }
.nt-porta--libera .nt-porta__numero::after{
  content:'';
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--nt-rosso); margin-left:.5em; vertical-align:middle;
  animation:nt-punto .5s var(--nt-ease);
}
@keyframes nt-punto{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ---------- fili e cartellini ---------- */
.nt-etichette__fili{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; overflow:visible;
}
.nt-filo{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.7; stroke-linecap:round; }
.nt-filo--rotto{ stroke:rgba(255,255,255,.34); stroke-width:1.4; }
.nt-chiodo{ fill:var(--nt-fumo); }

.nt-etichette__strato{ position:absolute; inset:0; z-index:4; pointer-events:none; }

.nt-etichetta{
  --tensione:0;
  position:absolute; top:0; left:0;
  width:clamp(118px, 12vw, 148px);
  padding:22px 12px 14px;
  margin:0; border:0;
  background:var(--nt-carta-calda);
  color:var(--nt-nero);
  font-family:var(--nt-testo);
  text-align:center;
  cursor:grab;
  touch-action:none;
  pointer-events:auto;
  user-select:none;
  transform-origin:50% 13px;
  will-change:transform;
  /* l'angolo tagliato del cartellino di casa */
  clip-path:polygon(0 13px, 13px 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  transition:filter var(--nt-tempo) var(--nt-ease);
}
.nt-etichetta:hover{ filter:drop-shadow(0 20px 34px rgba(0,0,0,.6)) brightness(1.03); }
.nt-etichetta:active,
.nt-etichetta--presa{ cursor:grabbing; }
.nt-etichetta:focus-visible{ outline:2px solid var(--nt-blu); outline-offset:3px; }

.nt-etichetta__foro{
  display:block; width:11px; height:11px; margin:0 auto 10px;
  border-radius:50%;
  background:var(--nt-nero-fondo, #0E0E0E);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.nt-etichetta__parola{
  display:block;
  font-family:var(--nt-display);
  font-size:clamp(.8125rem, .6rem + .5vw, .9375rem);
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.nt-etichetta__sigla{
  display:block;
  margin-top:8px;
  font-family:var(--nt-meta);
  font-size:.6875rem;
  letter-spacing:var(--nt-ls-meta);
  color:var(--nt-fumo);
}
/* Mentre tiri, il cartellino si scalda: la parola vira al rosso e il
   foro si allunga, come la carta che sta per cedere. */
.nt-etichetta__parola{ color:color-mix(in srgb, var(--nt-rosso) calc(var(--tensione) * 100%), var(--nt-nero)); }
.nt-etichetta__foro{ transform:scaleY(calc(1 + var(--tensione) * .55)); }
.nt-etichetta--libero{ cursor:grab; }
/* con prefers-reduced-motion il cartellino si toglie e basta */
.nt-etichetta--tolta{ opacity:0; transform:scale(.9); pointer-events:none; transition:opacity .3s, transform .3s; }

/* Posizione di ripiego: senza JavaScript i cartellini stanno fermi in
   alto a destra delle porte, e la sezione si legge lo stesso. */
.nt-etichette:not(.nt-etichette--vivo) .nt-etichette__strato{
  position:static;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.6vw, 26px);
  max-width:var(--nt-max);
  margin:calc(var(--nt-space-6) * -1) auto 0;
  padding-inline:var(--nt-gutter);
}
.nt-etichette:not(.nt-etichette--vivo) .nt-etichetta{ position:relative; margin-inline:auto; }
@media (max-width:900px){
  .nt-etichette:not(.nt-etichette--vivo) .nt-etichette__strato{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- pista e resa dei conti ---------- */
.nt-etichette__pista{
  position:relative; z-index:2;
  margin:clamp(2rem,4vh,3rem) 0 0;
  text-align:center;
  color:var(--nt-fumo-chiaro);
  transition:opacity var(--nt-tempo-l) var(--nt-ease);
}
.nt-etichette__pista--via{ opacity:0; }

.nt-etichette__esito{
  position:relative; z-index:2;
  margin:var(--nt-space-5) 0 0;
  text-align:center;
  font-family:var(--nt-display);
  font-size:clamp(1.25rem, 1rem + 1.4vw, 2rem);
  letter-spacing:var(--nt-ls-titolo);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .7s var(--nt-ease), transform .7s var(--nt-ease);
}
.nt-etichette__esito span{ color:var(--nt-rosso); }
.nt-etichette__esito--su{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .nt-porta, .nt-etichetta, .nt-etichette__esito, .nt-etichette__pista{ transition:none; }
  .nt-porta--libera .nt-porta__numero::after{ animation:none; }
}