/* ============================================================
   Guide — impianto grafico di guide, calcolatori e privacy
   Usa i token di main.css (--bg, --fg, --accent…): il tema
   chiaro/scuro e i colori restano quelli del sito.

   Chiare come la home (dal 1/10/2026): fondo grigio-azzurro con
   due bagliori fermi, schede bianche con la stessa ombra morbida,
   un colore d'accento solo, il blu. Scuro resta il piè di pagina.
   La barra in alto è la stessa della home (.nav, in main.css) con
   la classe nav--page: resta sempre visibile e cambia tema da sola
   sopra le sezioni con data-nav-theme="dark" (scripts/guida.js,
   navPagina).
   ============================================================ */

.guida{
  --misura:68ch; --gnav-h:4.4rem;
  /* le schede, come in home */
  --carta:#FFFFFF;
  --carta-bordo:rgba(13,15,20,.08);
  --ombra:0 44px 90px -52px rgba(22,40,90,.42), 0 14px 32px -22px rgba(22,40,90,.18);
  --ombra-lieve:0 30px 60px -44px rgba(22,40,90,.4);
}

/* ---------- il fondo della home ---------- */
.guida{
  --bg:#F6F7FA;
  --bg-2:#FFFFFF;
  --bg-3:#EEF1F7;
}
.guida::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 46% at 76% 30%, rgba(53,101,230,.09), transparent 70%),
    radial-gradient(40% 36% at 8% 92%, rgba(53,101,230,.05), transparent 72%);
}
.guida main, .guida .footer{ position:relative; z-index:1; }

/* ---------- barra in alto: la stessa della home ----------
   Sulle pagine interne ha sempre un fondo, anche senza JavaScript:
   scorrendo il testo le passa sotto. È un vetro del colore della
   pagina, così in cima non si vede una fascia; sopra il piè di pagina
   diventa blu notte (.on-dark). */
.nav--page{
  background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.guida .nav--page:not(.on-dark){ --nav-bg:rgba(246,247,250,.8); --nav-bg-solid:#F6F7FA; }
.nav--page.on-dark:not(.is-stuck){ border-bottom-color:transparent; }
@media (max-width:760px){
  .nav--page{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--nav-bg-solid); }
}

/* ---------- impianto della pagina ---------- */
/* overflow-x:clip taglia i fondi a tutta larghezza senza creare
   un contenitore di scorrimento: il sommario resta sticky */
.art{ padding:0 var(--gutter) clamp(3rem,8vh,6rem); overflow-x:clip; }

/* ---------- testata: sul fondo della pagina, come la prima schermata
   della home (i bagliori sono quelli fermi di .guida::before) ---------- */
.art__head{
  position:relative; isolation:isolate;
  max-width:var(--max); margin:0 auto;
  padding:calc(var(--gnav-h) + clamp(1.75rem,5vh,3.5rem)) 0 clamp(4.5rem,11vh,7.5rem);
}

.briciole{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:0 0 clamp(1.75rem,4vh,2.5rem); padding:0; list-style:none;
  font-size:.8125rem; color:var(--muted-2);
}
.briciole li::after{ content:"/"; margin-left:.5rem; opacity:.5; }
.briciole li:last-child::after{ content:none; }
.briciole a{ color:var(--muted); transition:color .3s var(--ease); }
.briciole a:hover{ color:var(--accent-text); }

/* come .kicker in home: in minuscolo, come si scrive */
.art__percorso{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.9375rem; font-weight:500; letter-spacing:-.007em;
  color:var(--accent-text);
  margin:0 0 1.25rem;
}
.art__percorso::before{ content:""; flex:none; width:22px; height:1px; background:currentColor; opacity:.7; }

.art h1{
  margin:0 0 1.5rem;
  font-size:clamp(2.25rem,1rem + 4.2vw,4.5rem);
  line-height:1; letter-spacing:-.026em; font-weight:500;
  max-width:20ch; text-wrap:balance;
}
.art h1 em{ color:var(--accent-text); font-size:1.04em; }
.art__sub{
  margin:0 0 2.25rem; max-width:58ch;
  font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);
  line-height:1.55; color:var(--muted);
  text-wrap:pretty;
}

.art__meta{
  display:flex; flex-wrap:wrap; gap:.5rem;
  font-size:.8125rem;
}
.art__meta span{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem;
  border:1px solid rgba(13,15,20,.1);
  border-radius:100px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
}
.art__meta b{ color:var(--fg); font-weight:500; }
@media (max-width:620px){
  .art__meta{ gap:.4rem; font-size:.75rem; }
  .art__meta span{ padding:.3rem .65rem; }
}

/* ---------- in breve: la card che si appoggia sulla testata ---------- */
.tldr{
  position:relative; z-index:2;
  max-width:var(--max);
  margin:calc(-1 * clamp(2.75rem,7vh,4.5rem)) auto clamp(2.5rem,5vw,4rem);
  padding:clamp(1.4rem,2.8vw,2.25rem) clamp(1.35rem,3vw,2.5rem);
  border:1px solid var(--carta-bordo);
  border-radius:20px;
  background:var(--carta);
  box-shadow:var(--ombra);
}
.tldr__t{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1.15rem;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--accent-text);
}
.tldr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.tldr li{
  position:relative; padding-left:1.75rem;
  font-size:clamp(1rem,.97rem + .2vw,1.0625rem); line-height:1.6;
  max-width:92ch;
}
.tldr li::before{
  content:"→"; position:absolute; left:0; top:0;
  color:var(--accent-text); font-size:.9375rem;
}
.tldr li b{ font-weight:600; }
.tldr a{ color:var(--accent-text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.tldr a:hover{ color:var(--fg); }

/* ---------- corpo: sommario + testo ---------- */
.art__body{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
@media (max-width:960px){
  .art__body{ grid-template-columns:1fr; gap:2rem; }
}

/* sommario (e, nei capitoli della macro-guida, il blocco che lo contiene) */
.toc,
.art__body > div:first-child:not(.art__content){
  position:sticky; top:calc(var(--gnav-h) + 1.75rem);
  max-height:calc(100vh - var(--gnav-h) - 3.5rem);
  overflow-y:auto;
  scrollbar-width:thin;
}
.art__body > div:first-child:not(.art__content) .toc{ position:static; max-height:none; overflow:visible; }
.toc{ padding-right:.25rem; }
.toc__title{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 .9rem;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--muted-2);
}
.toc__title i{ display:none; font-style:normal; color:var(--accent-text); }
.toc ol{
  list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:toc;
  border-left:1px solid var(--line-soft);
}
.toc li{ counter-increment:toc; }
.toc a{
  position:relative;
  display:flex; gap:.7rem;
  padding:.5rem .75rem .5rem 1rem;
  font-size:.875rem; line-height:1.4; color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-variant-numeric:tabular-nums;
  font-size:.6875rem; color:var(--muted-2);
  padding-top:.2em; flex:none;
}
.toc a::after{
  content:""; position:absolute; left:-1px; top:.35rem; bottom:.35rem; width:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleY(0); transition:transform .3s var(--ease);
}
.toc a:hover{ color:var(--fg); }
.toc a.is-active{ color:var(--fg); font-weight:500; }
.toc a.is-active::before{ color:var(--accent-text); }
.toc a.is-active::after{ transform:scaleY(1); }

@media (max-width:960px){
  .toc,
  .art__body > div:first-child:not(.art__content){ position:static; max-height:none; overflow:visible; }
  .toc{
    padding:1.1rem 1.25rem;
    border:1px solid var(--carta-bordo);
    border-radius:16px;
    background:var(--carta);
    box-shadow:var(--ombra-lieve);
  }
  .toc ol{ border-left:0; }
  .toc a{ padding-left:.25rem; }
  .toc a::after{ display:none; }
  .toc[data-chiuso="1"] ol{ display:none; }
  .toc__title{ cursor:pointer; margin:0; color:var(--fg); }
  .toc__title i{ display:inline; transition:transform .3s var(--ease); }
  .toc[data-chiuso="0"] .toc__title{ margin-bottom:.75rem; }
  .toc[data-chiuso="0"] .toc__title i{ transform:rotate(180deg); }
}

/* ---------- contenuto ---------- */
.art__content{ min-width:0; }
.art__content > *{ margin-top:0; margin-bottom:0; }
.art__content > * + *{ margin-top:1.35rem; }

.art__content h2{
  margin:clamp(3.5rem,6vw,5rem) 0 0;
  font-size:clamp(1.625rem,1.2rem + 1.3vw,2.5rem);
  line-height:1.1; letter-spacing:-.023em; font-weight:500;
  text-wrap:balance;
  scroll-margin-top:calc(var(--gnav-h) + 1.5rem);
}
.art__content h2:first-child{ margin-top:0; }
.art__content h2 + *{ margin-top:1.25rem; }
.art__content h2 .num{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:.9rem;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.art__content h2 .num::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.art__content h3{
  margin-top:2.5rem;
  font-size:clamp(1.1875rem,1.08rem + .5vw,1.4375rem);
  line-height:1.25; letter-spacing:-.016em; font-weight:600;
  scroll-margin-top:calc(var(--gnav-h) + 1.5rem);
}
.art__content h3 + *{ margin-top:.85rem; }
.art__content h2 + h3{ margin-top:1.75rem; }
.art__content p{
  max-width:var(--misura);
  font-size:clamp(1rem,.97rem + .22vw,1.09375rem);
  line-height:1.75; color:var(--fg);
  text-wrap:pretty;
}
.art__content p.sfumato{ color:var(--muted); font-size:.9375rem; line-height:1.65; }
.art__content a:not(.btn){
  color:var(--accent-text);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.art__content a:not(.btn):hover{ color:var(--fg); text-decoration-color:currentColor; }
.art__content strong{ font-weight:600; }

.art__content ul, .art__content ol{
  padding:0 0 0 1.35rem;
  max-width:var(--misura);
  display:grid; gap:.65rem;
  font-size:clamp(1rem,.97rem + .22vw,1.09375rem);
  line-height:1.7;
}
.art__content li{ padding-left:.2rem; }
.art__content li::marker{ color:var(--accent-text); }

/* ---------- riquadri ---------- */
.box{
  position:relative;
  max-width:var(--misura);
  padding:clamp(1.2rem,2.2vw,1.6rem) clamp(1.25rem,2.4vw,1.75rem);
  border:1px solid rgba(13,15,20,.1);
  border-radius:16px;
  background:var(--carta);
}
.box__t{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .75rem !important;
  font-size:.75rem !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.box__t b{ color:inherit; font-weight:600; letter-spacing:.14em; }
.box p, .box ul, .box ol{ font-size:.96875rem !important; line-height:1.65; }
.box > * + *{ margin-top:.7rem !important; }
.box > :first-child{ margin-top:0 !important; }

.box--pratica{
  border-color:rgba(53,101,230,.22);
  background:linear-gradient(180deg, rgba(53,101,230,.075), rgba(53,101,230,.025));
}
.box--pratica .box__t{ color:var(--accent-text); }

/* l'attenzione: bianca, con l'etichetta scura e la lineetta davanti come
   le etichette della home (era arancione: il sito ha un colore d'accento
   solo, il blu dei consigli) */
.box--attenzione{ border-color:rgba(13,15,20,.14); }
.box--attenzione .box__t{ color:var(--fg); align-items:flex-start; }
/* sull'asse della prima riga, anche quando l'etichetta va a capo */
.box--attenzione .box__t::before{ content:""; flex:none; width:18px; height:2px; margin-top:calc(.825em - 1px); background:currentColor; }

.box--esempio{
  border-style:dashed;
  background:var(--bg-3);
  border-color:var(--line);
}

.box--partner{
  border-color:rgba(53,101,230,.35);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(53,101,230,.14), transparent 60%),
    var(--bg-2);
  box-shadow:0 20px 50px -38px rgba(27,78,214,.55);
}
.box--partner .box__t{ color:var(--accent-text); }
.box--partner .box__link{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.35rem;
  padding:.65rem 1.15rem;
  border-radius:100px;
  background:var(--accent-deep,#2559E0);
  color:#fff !important;
  text-decoration:none !important;
  font-size:.875rem; font-weight:600;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.box--partner .box__link:hover{ color:#fff !important; transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(53,101,230,.6); }
.box__disclosure{
  margin-top:.6rem !important;
  font-size:.75rem !important; line-height:1.5;
  color:var(--muted-2) !important;
}

/* ---------- tabelle ---------- */
.tab{
  max-width:100%;
  overflow-x:auto;
  border:1px solid rgba(13,15,20,.1);
  border-radius:16px;
  background:var(--carta);
  -webkit-overflow-scrolling:touch;
}
.tab table{ width:100%; border-collapse:collapse; font-size:.9375rem; line-height:1.55; min-width:520px; }
.tab caption{
  text-align:left; padding:1.05rem 1.2rem .85rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--muted);
}
.tab th, .tab td{ padding:.9rem 1.2rem; text-align:left; vertical-align:top; }
/* l'angolo vuoto in alto a sinistra è un td: un th vuoto non intesta niente */
.tab thead th, .tab thead td{
  font-weight:600; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  background:var(--bg-3);
  border-block:1px solid var(--line-soft);
}
.tab caption + thead tr > *{ border-top:1px solid var(--line-soft); }
.tab table:not(:has(caption)) thead tr > *{ border-top:0; }
.tab tbody tr + tr > *{ border-top:1px solid var(--line-soft); }
.tab tbody tr{ transition:background .2s var(--ease); }
.tab tbody tr:hover{ background:var(--soft); }
.tab tbody th{ font-weight:600; }
.tab td b{ font-weight:600; }
.tab .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- numeri in evidenza ---------- */
.cifre{
  max-width:var(--misura);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:16px; overflow:hidden;
}
.cifre div{ background:var(--bg-2); padding:1.25rem 1.2rem 1.15rem; }
.cifre b{
  display:block;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem); line-height:1; color:var(--accent);
  margin-bottom:.5rem;
}
.cifre span{ font-size:.8125rem; color:var(--muted); line-height:1.45; display:block; }

/* ---------- passi ---------- */
.passi{
  max-width:var(--misura); list-style:none;
  padding:0 !important; display:grid; gap:0 !important;
  counter-reset:passo;
}
.passi li{
  counter-increment:passo;
  position:relative;
  padding:0 0 1.5rem 3.35rem !important;
}
.passi li:last-child{ padding-bottom:0 !important; }
.passi li::before{
  content:counter(passo);
  position:absolute; left:0; top:0;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--bg-2); color:var(--accent-text);
  border:1px solid rgba(53,101,230,.35);
  font-size:.8125rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* il filo che lega un passo al successivo */
.passi li:not(:last-child)::after{
  content:""; position:absolute; left:15.5px; top:36px; bottom:4px; width:1px;
  background:linear-gradient(var(--line), var(--line-soft));
}
.passi b{ display:block; margin:.2rem 0 .3rem; font-weight:600; line-height:1.4; }
.passi span{ display:block; color:var(--muted); font-size:.96875rem; line-height:1.65; }

/* ---------- checklist ---------- */
.check{
  max-width:var(--misura); list-style:none;
  padding:.5rem !important; display:grid; gap:.1rem !important;
  border:1px solid var(--carta-bordo); border-radius:16px;
  background:var(--carta);
  box-shadow:var(--ombra-lieve);
}
.check li{ margin:0; padding:0 !important; }
.check label{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.75rem .85rem;
  border-radius:10px;
  cursor:pointer;
  font-size:.96875rem; line-height:1.5;
  transition:background .25s var(--ease);
}
.check label:hover{ background:rgba(53,101,230,.05); }
.check input{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; flex:none; margin:.1em 0 0;
  border:1.5px solid var(--line); border-radius:6px;
  background:var(--bg-2);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.check input:checked{ background:var(--accent); border-color:var(--accent); }
.check input:checked::after{
  content:""; width:10px; height:6px; margin-top:-2px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.check input:checked + span{ color:var(--muted-2); text-decoration:line-through; text-decoration-color:var(--line); }
/* contatore "3 di 9" — i numeri li scrive guida.js */
.check[data-tot]::after{
  content:attr(data-fatti) " di " attr(data-tot) " fatti";
  display:block;
  padding:.6rem .85rem .35rem;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2);
}

/* ---------- FAQ dell'articolo ---------- */
.art__faq{
  max-width:var(--max); margin:clamp(4rem,8vw,6rem) auto 0;
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.art__faq h2{
  position:sticky; top:calc(var(--gnav-h) + 1.75rem);
  margin:0;
  font-size:clamp(1.625rem,1.2rem + 1.3vw,2.5rem);
  line-height:1.05; letter-spacing:-.023em; font-weight:500;
}
.art__faq .faq{ max-width:none; margin:0; border-top:1px solid var(--line); }
.art__faq .faq__item summary{ font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); }
.art__faq .faq__body p{ padding-right:min(10%,3rem); line-height:1.7; }
@media (max-width:960px){
  .art__faq{ grid-template-columns:1fr; gap:1.25rem; }
  .art__faq h2{ position:static; }
}

/* ---------- chiusura: una scheda bianca, il bottone nero come in home ---------- */
.art__cta{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:var(--max); margin:clamp(4rem,8vw,6rem) auto 0;
  padding:clamp(2rem,4.5vw,3.75rem);
  border-radius:24px;
  border:1px solid var(--carta-bordo);
  background:var(--carta);
  box-shadow:var(--ombra);
  display:grid; gap:1.75rem;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.art__cta::before{
  content:""; position:absolute; z-index:-1;
  right:-10%; bottom:-120%;
  width:min(900px,110%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(53,101,230,.12), rgba(53,101,230,0) 62%);
  pointer-events:none;
}
/* testo bianco pieno sul bottone nero (il --bg della pagina è grigio chiaro) */
.art__cta .btn:not(.btn--ghost):not(.btn--link){ --btn-fg:#FFFFFF; }
.art__cta h2{
  margin:0 0 .75rem;
  font-size:clamp(1.625rem,1.2rem + 1.6vw,2.75rem);
  line-height:1.05; letter-spacing:-.023em; font-weight:500;
  text-wrap:balance;
}
.art__cta h2 em{ color:var(--accent-text); }
.art__cta p{ margin:0; color:var(--muted); max-width:54ch; font-size:1rem; line-height:1.65; }
.art__cta__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end; }
@media (max-width:760px){
  .art__cta{ grid-template-columns:1fr; border-radius:20px; }
  .art__cta .btn{ width:100%; }
  .art__cta__actions{ justify-content:stretch; }
}

/* ---------- fonti e avvertenza ---------- */
.art__fonti{
  max-width:var(--max); margin:clamp(3rem,6vw,4rem) auto 0;
  padding-top:1.75rem; border-top:1px solid var(--line-soft);
}
.art__fonti h2{ margin:0 0 1rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:500; }
.art__fonti ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.art__fonti a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem;
  border:1px solid var(--line); border-radius:100px;
  font-size:.8125rem; color:var(--muted);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.art__fonti a::after{ content:"↗"; font-size:.75rem; color:var(--muted-2); }
.art__fonti a:hover{ border-color:var(--accent); color:var(--fg); }
.avviso{
  margin:1.5rem 0 0;
  font-size:.8125rem; line-height:1.6; color:var(--muted-2);
  max-width:78ch;
}

/* ---------- altre guide ---------- */
.altre{ max-width:var(--max); margin:clamp(3rem,6vw,4.5rem) auto 0; }
.altre__t{
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.25rem;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--muted-2);
}
.altre__t::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.altre__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.altre__grid a{
  position:relative;
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.35rem 3rem 1.35rem 1.35rem;
  border:1px solid var(--carta-bordo); border-radius:16px;
  background:var(--carta);
  box-shadow:var(--ombra-lieve);
  text-decoration:none;
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.altre__grid a::after{
  content:"→"; position:absolute; right:1.25rem; top:1.3rem;
  color:var(--accent-text);
  transform:translateX(-4px); opacity:.5;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.altre__grid a:hover{ border-color:var(--accent); transform:translateY(-3px); }
.altre__grid a:hover::after{ transform:none; opacity:1; }
.altre__grid b{ display:block; font-weight:500; font-size:1.0625rem; letter-spacing:-.013em; line-height:1.3; color:var(--fg); }
.altre__grid span{ font-size:.875rem; line-height:1.55; color:var(--muted); }

/* ---------- contrasto: testo bianco solo su --accent-deep ----------
   Il blu pieno (--accent) col bianco sopra resta appena sotto 4.5:1.
   Queste regole battono gli stili scritti dentro le singole pagine
   (capitoli della macro-guida e calcolatori), per questo sono più
   specifiche del necessario. */
.art__body .serie li[aria-current="true"] span{ background:var(--accent-deep); }
.art .calc .calc__res div.is-key{ background:var(--accent-deep); border-color:var(--accent-deep); }

/* testata senza "In breve" sotto (calcolatori): meno vuoto in fondo */
.art__head:not(:has(+ .tldr)):has(+ .art__body){ padding-bottom:clamp(2.75rem,6vh,4rem); }
.art__head + .art__body{ margin-top:clamp(2.5rem,5vw,3.5rem); }

/* profondità al passaggio del mouse sulle schede "Continua" */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .altre__grid a:hover{ transform:perspective(1000px) rotateX(5deg) rotateY(-4deg) translateY(-5px); }
  .altre__grid a:nth-child(even):hover{ transform:perspective(1000px) rotateX(5deg) rotateY(4deg) translateY(-5px); }
}

/* ---------- a capo, come in home: titoli piccoli in righe pari,
   niente parola da sola sull'ultima riga ---------- */
.guida main :is(h3, .box__t, .altre__grid b){ text-wrap:balance; }
.guida main :is(li, figcaption, .tldr li){ text-wrap:pretty; }