/* Lo stile del sito (grafica Festa): colori pieni, forme morbide, pulsanti in rilievo che si schiacciano.
   Tools = viola, Task = verde, Tips = arancio. Un solo carattere, Nunito, ospitato qui (licenza OFL in /caratteri/).
   Misure in rem: il tasto A+ le ingrandisce tutte. */
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/caratteri/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/caratteri/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --fondo: #FFFFFF;
  --fondo-2: #F7F6FB;
  --superficie: #FFFFFF;
  --campo: #FFFFFF;
  --testo: #1F2937;
  --testo-2: #4B5563;
  --linea: #E5E7EB;
  --linea-2: #D1D5DB;
  --rilievo-neutro: #D1D5DB;
  --bordo-campo: #8B93A0;

  --viola: #7C3AED; --viola-rilievo: #5B21B6; --viola-tenue: #F5F3FF; --viola-testo: #6D28D9; --viola-chiaro: #DDD6FE; --viola-scuro: #4C1D95;
  --verde: #15803D; --verde-rilievo: #14532D; --verde-tenue: #F0FDF4; --verde-testo: #15803D; --verde-chiaro: #BBF7D0;
  --arancio: #C2410C; --arancio-rilievo: #7C2D12; --arancio-tenue: #FFF7ED; --arancio-testo: #C2410C; --arancio-chiaro: #FED7AA;
  --giallo: #FACC15; --giallo-tenue: #FEFCE8; --giallo-testo: #A16207; --giallo-chiaro: #FDE68A;

  --numero: #4C1D95;
  --fuoco: var(--az-testo);
  --anello: rgba(124, 58, 237, .28);
  --errore: #B91C1C; --errore-tenue: #FEF2F2;
  --fascia: #7C3AED;
  --fascia-verde: #15803D;
  --fascia-arancio: #C2410C;
  --anello-fondo: #EDE9FE;

  --b-netto: #7C3AED; --b-contributi: #0284C7; --b-irpef: #E11D48; --b-addizionali: #D97706; --b-5: #15803D; --b-6: #DB2777;

  --ombra-morbida: 0 1px 2px rgba(31, 41, 55, .05), 0 18px 40px -18px rgba(76, 29, 149, .28);
  --r-grande: 2rem;
  --r-medio: 1.25rem;
}
:root, .mondo-tools { --az: var(--viola); --az-rilievo: var(--viola-rilievo); --az-tenue: var(--viola-tenue); --az-testo: var(--viola-testo); --az-chiaro: var(--viola-chiaro); }
.mondo-tips { --az: var(--arancio); --az-rilievo: var(--arancio-rilievo); --az-tenue: var(--arancio-tenue); --az-testo: var(--arancio-testo); --az-chiaro: var(--arancio-chiaro); }
.mondo-tasks { --az: var(--verde); --az-rilievo: var(--verde-rilievo); --az-tenue: var(--verde-tenue); --az-testo: var(--verde-testo); --az-chiaro: var(--verde-chiaro); }
:root[data-tema="scuro"] {
  color-scheme: dark;
  --fondo: #111827;
  --fondo-2: #0C1220;
  --superficie: #1B2433;
  --campo: #111827;
  --testo: #F9FAFB;
  --testo-2: #D1D5DB;
  --linea: #334155;
  --linea-2: #475569;
  --rilievo-neutro: #070B14;
  --bordo-campo: #64748B;

  --viola-rilievo: #3B1782; --viola-tenue: #1E1B2E; --viola-testo: #C4B5FD; --viola-chiaro: #3B2A6B; --viola-scuro: #C4B5FD;
  --verde-rilievo: #0B3B1E; --verde-tenue: #132A1D; --verde-testo: #4ADE80; --verde-chiaro: #1F4D30;
  --arancio-rilievo: #5A200B; --arancio-tenue: #2A1C12; --arancio-testo: #FB923C; --arancio-chiaro: #5A2E14;
  --giallo: #FDE047; --giallo-tenue: #26220E; --giallo-testo: #FDE047; --giallo-chiaro: #4A3F12;

  --numero: #EDE9FE;
  --fuoco: #FDE047;
  --anello: rgba(167, 139, 250, .35);
  --errore: #FCA5A5; --errore-tenue: #3A1618;
  --fascia: #5B21B6;
  --fascia-verde: #166534;
  --fascia-arancio: #9A3412;
  --anello-fondo: #2E2650;

  --b-netto: #A78BFA; --b-contributi: #38BDF8; --b-irpef: #FB7185; --b-addizionali: #FBBF24; --b-5: #4ADE80; --b-6: #F472B6;

  --ombra-morbida: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------------------------------------------
   base
   --------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
html[data-testo="grande"] { font-size: 115%; }
/* col testo grande la testata resta della sua misura (i comandi sono già da 44 px): così non esce dallo schermo */
html[data-testo="grande"] .testata { zoom: .8696; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.875rem, 2.2vw + 1.2rem, 2.625rem); }
h3 { font-size: 1.375rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--viola-testo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
svg { display: block; }
.cifre { font-variant-numeric: tabular-nums lining-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.dentro { width: min(100% - 2rem, 75rem); margin-inline: auto; }
@media (min-width: 700px) { .dentro { width: min(100% - 4rem, 75rem); } }

.salta {
  position: absolute; left: 1rem; top: .75rem; z-index: 50;
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.25rem;
  background: var(--az); color: #fff; font-weight: 800; border-radius: 1rem; text-decoration: none;
  transform: translateY(-160%);
}
.salta:focus { transform: none; }

/* ---------------------------------------------------------------------------------------------------------
   i tasti in rilievo: il bordo di sotto scende a zero quando li premi
   --------------------------------------------------------------------------------------------------------- */
.tasto, .tondo {
  --r: 5px;
  --t-fondo: var(--superficie); --t-testo: var(--testo); --t-bordo: var(--linea-2); --t-rilievo: var(--rilievo-neutro);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: inherit; font-weight: 800; line-height: 1.2;
  color: var(--t-testo); background: var(--t-fondo);
  border: 2px solid var(--t-bordo);
  box-shadow: 0 var(--r) 0 var(--t-rilievo);
  margin-bottom: var(--r);
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .08s ease-out, box-shadow .08s ease-out, background-color .15s, border-color .15s, color .15s;
}
.tasto {
  min-height: 3.5rem; padding: .7rem 1.35rem; border-radius: 1.1rem; font-size: 1.0625rem;
}
.tasto .icona { width: 1.4rem; height: 1.4rem; flex: none; }
.tasto:hover, .tondo:hover { --t-bordo: var(--az); }
.tasto:active, .tondo:active, .tasto.premuto, .tondo.premuto { transform: translateY(var(--r)); box-shadow: 0 0 0 var(--t-rilievo); }
.tasto-pieno { --t-fondo: var(--az); --t-testo: #fff; --t-bordo: var(--az); --t-rilievo: var(--az-rilievo); }
.tasto-pieno:hover { --t-bordo: var(--az); --t-fondo: var(--az); filter: brightness(.94); }
.tasto-largo { display: flex; width: 100%; }
/* «Stampa»: il tasto piccolo accanto a «Scarica il PDF» (sempre almeno 44 px) */
.tasto-piccolo { --r: 4px; min-height: 2.75rem; padding: .45rem 1rem; border-radius: .95rem; font-size: .9375rem; gap: .5rem; }
.tasto-piccolo .icona { width: 1.2rem; height: 1.2rem; }
.tasto[aria-busy="true"] { cursor: progress; }
.azioni-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.tondo {
  width: 3.5rem; height: 3.5rem; flex: none; padding: 0; border-radius: 50%;
  --t-fondo: var(--az); --t-testo: #fff; --t-bordo: var(--az); --t-rilievo: var(--az-rilievo);
}
.tondo .icona { width: 1.6rem; height: 1.6rem; stroke-width: 3; }
.tondo.piccolo {
  --r: 4px; width: 2.75rem; height: 2.75rem;
  --t-fondo: var(--superficie); --t-testo: var(--testo); --t-bordo: var(--linea-2); --t-rilievo: var(--rilievo-neutro);
}
.tondo.piccolo .icona { width: 1.35rem; height: 1.35rem; stroke-width: 2.4; }

/* il segno dei marchi dentro un disco colorato */
.disco {
  display: inline-grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  color: #fff; background: var(--viola);
}
.disco .segno { width: 62%; height: 62%; }
.disco-tasks { background: var(--verde); }
.disco-tips { background: var(--arancio); }
.disco-percorso { background: var(--testo); color: var(--fondo); }

/* ---------------------------------------------------------------------------------------------------------
   testata
   --------------------------------------------------------------------------------------------------------- */
.testata { position: relative; z-index: 5; }
.testata-riga {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "nome comandi" "marchi marchi";
  align-items: center; gap: .5rem .5rem; padding: .5rem 0 .4rem;
}
.nome {
  grid-area: nome; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  min-height: 2.75rem; color: var(--testo); text-decoration: none; justify-self: start;
}
.nome-cornice {
  display: inline-block; padding: 0 .55rem; border: 2.5px dashed currentColor; border-radius: .7rem;
  font-weight: 900; font-size: 1.125rem; letter-spacing: .06em; line-height: 1.35;
}
.nome-etichetta { font-size: .9375rem; font-weight: 700; color: var(--testo-2); line-height: 1.1; white-space: nowrap; }
.comandi { grid-area: comandi; justify-self: end; display: flex; align-items: center; gap: .5rem; }
.comandi .tondo.piccolo { margin-bottom: 4px; }
.lingue {
  display: flex; align-items: center; padding: 1px; margin-bottom: 4px;
  border: 2px solid var(--linea-2); border-radius: 999px; background: var(--superficie);
}
.lingua {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
  border-radius: 999px; font-weight: 900; font-size: .9375rem; color: var(--testo-2); text-decoration: none;
}
.lingua[aria-current] { background: var(--testo); color: var(--fondo); }
a.lingua:hover { color: var(--viola-testo); }
.tasto-tema .se-scuro, [data-tema="scuro"] .tasto-tema .se-chiaro { display: none; }
[data-tema="scuro"] .tasto-tema .se-scuro { display: block; }
.tasto-testo span { font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; }
.tasto-testo[aria-pressed="true"] { --t-fondo: var(--az); --t-testo: #fff; --t-bordo: var(--az); --t-rilievo: var(--az-rilievo); }

.marchi { grid-area: marchi; min-width: 0; }
.marchi ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.marchio {
  --m: var(--viola); --m-tenue: var(--viola-tenue); --m-testo: var(--viola-testo);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .3rem; row-gap: .15rem;
  min-height: 2.75rem; height: 100%; padding: .4rem .2rem .45rem; text-align: center;
  border-radius: 1rem; background: var(--m-tenue); border: 2px solid transparent;
  color: var(--testo); text-decoration: none; line-height: 1.15;
  transition: border-color .15s, transform .12s;
}
.marchio-tasks { --m: var(--verde); --m-tenue: var(--verde-tenue); --m-testo: var(--verde-testo); }
.marchio-tips { --m: var(--arancio); --m-tenue: var(--arancio-tenue); --m-testo: var(--arancio-testo); }
.marchio .disco { width: 1.3rem; height: 1.3rem; background: var(--m); }
.marchio .disco .segno { stroke-width: 3.6; }
.marchio-parole { display: contents; }
.marchio-nome { order: -1; flex-basis: 100%; font-weight: 900; font-size: min(.9375rem, 3.9vw); letter-spacing: -.015em; white-space: nowrap; }
.marchio-cosa { font-weight: 800; font-size: .9375rem; color: var(--m-testo); }
.marchio:hover { border-color: var(--m); }
.marchio[aria-current] { border-color: var(--m); box-shadow: inset 0 0 0 1px var(--m); }

@media (min-width: 1100px) {
  .testata-riga { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nome marchi comandi"; padding: 1rem 0; }
  .marchi ul { display: flex; gap: .5rem; }
  .marchio { flex-wrap: nowrap; justify-content: flex-start; gap: .6rem; padding: .4rem 1.1rem .4rem .45rem; border-radius: 999px; text-align: left; }
  .marchio .disco { width: 2.25rem; height: 2.25rem; }
  .marchio .disco .segno { stroke-width: 3; }
  .marchio-parole { display: flex; flex-direction: column; }
  .marchio-nome { order: 0; flex-basis: auto; font-size: .9375rem; }
}

/* ---------------------------------------------------------------------------------------------------------
   HOME · l'apertura
   --------------------------------------------------------------------------------------------------------- */
.eroe {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 38%); grid-template-areas: "titolo adesivi" "sotto sotto" "cerca cerca";
  align-items: center; gap: 0 .5rem; padding: 1.5rem 0 2.5rem;
}
.motto {
  grid-area: titolo; font-size: clamp(2.9rem, 5.2vw + 1.7rem, 6.75rem); line-height: .98; letter-spacing: -0.035em;
}
.motto span { display: block; }
.m-tools { color: var(--viola-testo); }
.m-tasks { color: var(--verde-testo); }
.m-tips { color: var(--arancio-testo); }
.eroe-sotto { grid-area: sotto; margin-top: 1.25rem; font-size: 1.1875rem; color: var(--testo-2); max-width: 36rem; font-weight: 600; }
.eroe .cerca { grid-area: cerca; margin-top: 1.75rem; max-width: 40rem; }

/* gli adesivi: tre quadrati colorati, un po' storti, con il loro disegno */
.adesivi { grid-area: adesivi; position: relative; aspect-ratio: 1 / 1.08; width: 100%; align-self: center; }
.adesivo { position: absolute; display: block; }
.adesivo-faccia {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 26%; background: var(--viola); box-shadow: 0 .45rem 0 var(--viola-rilievo);
}
.adesivo .disegno { width: 64%; height: auto; }
.adesivo-tools { width: 58%; aspect-ratio: 1; left: 2%; top: 0; transform: rotate(-9deg); }
.adesivo-tasks { width: 47%; aspect-ratio: 1; right: 0; top: 30%; transform: rotate(8deg); }
.adesivo-tasks .adesivo-faccia { background: var(--verde); box-shadow: 0 .45rem 0 var(--verde-rilievo); }
.adesivo-tips { width: 50%; aspect-ratio: 1; left: 12%; bottom: 0; transform: rotate(4deg); }
.adesivo-tips .adesivo-faccia { background: var(--arancio); box-shadow: 0 .45rem 0 var(--arancio-rilievo); }
.adesivo-tips .disegno { width: 74%; }
.adesivi .stellina { position: absolute; width: 22%; right: 6%; top: 2%; }
.coriandolo { position: absolute; display: block; border-radius: 999px; }
.adesivi .c1 { width: 6%; aspect-ratio: 1; background: var(--giallo); left: -3%; top: 62%; }
.adesivi .c2 { width: 11%; height: 4.5%; background: #A78BFA; right: 2%; bottom: 8%; transform: rotate(28deg); }
.adesivi .c3 { width: 5%; aspect-ratio: 1; background: #4ADE80; left: 63%; top: 2%; }
.adesivi .c4 { width: 9%; height: 4%; background: #FB923C; left: 64%; bottom: 0; transform: rotate(-22deg); }
.adesivi .c5 { width: 4%; aspect-ratio: 1; background: #F472B6; right: 30%; top: 26%; }

@media (min-width: 900px) {
  .eroe { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "titolo adesivi" "sotto adesivi" "cerca adesivi"; gap: 0 3rem; padding: 2.5rem 0 4rem; }
  .motto { align-self: end; }
  .eroe-sotto { font-size: 1.3125rem; margin-top: 1.75rem; }
  .eroe .cerca { align-self: start; }
  .adesivi { max-width: 30rem; justify-self: end; }
}

/* ---------------------------------------------------------------------------------------------------------
   la ricerca
   --------------------------------------------------------------------------------------------------------- */
.cerca { position: relative; }
.cerca-etichetta { display: block; font-weight: 900; font-size: 1.25rem; margin-bottom: .6rem; }
.cerca-campo { position: relative; }
.cerca-campo input {
  width: 100%; height: 4rem; padding: 0 4.75rem 0 1.4rem;
  font: inherit; font-size: 1.25rem; font-weight: 700; color: var(--testo);
  background: var(--campo); border: 3px solid var(--testo); border-radius: 999px;
  box-shadow: 0 5px 0 var(--testo);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
[data-tema="scuro"] .cerca-campo input { border-color: var(--bordo-campo); box-shadow: 0 5px 0 var(--rilievo-neutro); }
.cerca-campo input::placeholder { color: var(--testo-2); opacity: 1; font-weight: 600; }
.cerca-campo input { text-overflow: ellipsis; }
.cerca-campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cerca-campo input:focus { outline: none; border-color: var(--viola); box-shadow: 0 5px 0 var(--viola-rilievo), 0 0 0 6px var(--anello); }
.cerca-tasto {
  position: absolute; right: .45rem; top: .45rem; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--viola); color: #fff; box-shadow: 0 4px 0 var(--viola-rilievo);
  transition: transform .08s, box-shadow .08s;
}
.cerca-tasto:active { transform: translateY(4px); box-shadow: 0 0 0 var(--viola-rilievo); }
.cerca-tasto .icona { width: 1.5rem; height: 1.5rem; stroke-width: 3; }
.cerca-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + .75rem); z-index: 20; list-style: none;
  padding: .5rem; background: var(--superficie); border: 2px solid var(--linea-2); border-radius: 1.5rem;
  box-shadow: 0 6px 0 var(--rilievo-neutro), var(--ombra-morbida); max-height: min(24rem, 60vh); overflow: auto;
}
.cerca-lista [role="option"] {
  display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .5rem .75rem;
  border-radius: 1rem; cursor: pointer; font-weight: 800;
}
.cerca-lista [role="option"] .opz-dove { margin-left: auto; font-size: .9375rem; font-weight: 700; color: var(--testo-2); white-space: nowrap; }
.cerca-lista [role="option"]:hover, .cerca-lista [aria-selected="true"] { background: var(--viola-tenue); }
.cerca-lista [aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--viola); }
.cerca-vuoto:not(:empty) { margin-top: .9rem; font-weight: 700; color: var(--testo-2); }
.prova { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: 1.1rem; }
.prova-testo { font-weight: 800; color: var(--testo-2); }
.prova ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.gettoncino {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.05rem;
  font: inherit; font-weight: 800; font-size: 1rem; color: var(--viola-testo);
  background: var(--viola-tenue); border: 2px solid var(--viola-chiaro); border-radius: 999px;
  box-shadow: 0 3px 0 var(--viola-chiaro); margin-bottom: 3px; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.gettoncino:active { transform: translateY(3px); box-shadow: none; }

/* ---------------------------------------------------------------------------------------------------------
   le tre porte: un mondo di colore per sito
   --------------------------------------------------------------------------------------------------------- */
.porte { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 4rem; }
@media (min-width: 960px) { .porte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.porta {
  --p: var(--viola); --p-rilievo: var(--viola-rilievo); --p-scuro: #4C1D95;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--r-grande);
  background: var(--p); color: #fff; box-shadow: 0 8px 0 var(--p-rilievo); margin-bottom: 8px;
}
.porta-tasks { --p: var(--verde); --p-rilievo: var(--verde-rilievo); --p-scuro: #14532D; }
.porta-tips { --p: var(--arancio); --p-rilievo: var(--arancio-rilievo); --p-scuro: #7C2D12; }
.porta::before {
  content: ""; position: absolute; z-index: -1; width: 15rem; height: 15rem; right: -5rem; top: -5.5rem;
  border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.porta-disegno { position: absolute; right: .9rem; top: 1rem; width: 6.25rem; transform: rotate(7deg); }
.porta-tips .porta-disegno { width: 7.25rem; right: .5rem; top: 1.4rem; }
.porta-disegno .disegno { width: 100%; height: auto; }
.porta-segno {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem;
  background: #fff; color: var(--p); box-shadow: 0 4px 0 var(--p-rilievo);
}
.porta-segno .segno { width: 1.9rem; height: 1.9rem; stroke-width: 3.2; }
.porta-nome { font-size: 2rem; margin-top: .9rem; padding-right: 6.5rem; }
.porta-nome a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; text-decoration: none; }
.porta-nome a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.porta :focus-visible { outline-color: #fff; }
[data-tema="scuro"] .porta :focus-visible { outline-color: var(--fuoco); }
.porta-quante {
  display: inline-flex; margin-top: .6rem; padding: .15rem .8rem; border-radius: 999px;
  background: rgba(0, 0, 0, .2); font-weight: 900; font-size: 1rem;
}
.porta-frase { margin-top: .85rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.4; max-width: 22rem; }
.porta-esempi { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.porta-esempi a {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .5rem 1.05rem;
  border-radius: 999px; background: #fff; color: var(--p-scuro);
  font-weight: 800; font-size: 1.0625rem; line-height: 1.2; text-decoration: none;
  box-shadow: 0 4px 0 rgba(15, 10, 40, .28); margin-bottom: 4px;
  transition: transform .08s, box-shadow .08s;
}
.porta-esempi a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.porta-esempi a:active { transform: translateY(4px); box-shadow: none; }

/* ---------------------------------------------------------------------------------------------------------
   isole di colore (la sezione «Quanto prendi netto?»)
   --------------------------------------------------------------------------------------------------------- */
.isola { background: var(--viola-tenue); border-radius: 2.5rem; padding: 2rem 1.25rem 1.5rem; margin-bottom: 4.5rem; }
.netto-mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.mini-testo { position: relative; min-width: 0; }
.mini-testo h2 { color: var(--viola-testo); padding-right: 5.5rem; }
.mini-testo p { margin-top: .85rem; font-size: 1.1875rem; font-weight: 600; max-width: 30rem; }
.mini-testo .mini-dove { color: var(--testo-2); font-size: 1.0625rem; margin-top: .5rem; }
.mini-disegno { position: absolute; right: .3rem; top: -.75rem; width: 5.25rem; transform: rotate(8deg); }
.mini-disegno .disegno { width: 100%; height: auto; }
.mini-scheda {
  background: var(--superficie); border: 3px solid var(--viola); border-radius: var(--r-grande);
  box-shadow: 0 8px 0 var(--viola-rilievo); margin-bottom: 8px; padding: 1.4rem 1.1rem 1.25rem;
}
.mini-ral { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mini-ral label { font-weight: 900; font-size: 1.25rem; }
.mini-ral output { font-weight: 900; font-size: 1.75rem; letter-spacing: -.02em; }
.mini-cursore { display: flex; align-items: center; gap: .6rem; margin: .75rem 0 1.25rem; }
.mini-risultato { border-top: 3px dashed var(--viola-chiaro); padding-top: 1.1rem; margin-bottom: 1.25rem; }
.mini-etichetta { font-weight: 900; font-size: 1.125rem; color: var(--viola-testo); }
.mini-frase { font-weight: 600; margin-top: .35rem; }

@media (min-width: 900px) {
  .isola { padding: 3.25rem 3.25rem 3rem; }
  .netto-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
  .mini-testo h2 { padding-right: 0; font-size: 3.25rem; }
  .mini-testo { display: flex; flex-direction: column; align-items: flex-start; }
  .mini-disegno { position: static; order: -1; width: 7.5rem; margin: 0 0 1.5rem; transform: rotate(-7deg); }
  .mini-scheda { padding: 2rem 2rem 1.75rem; }
}

/* il cursore grande */
.cursore {
  --pieno: 50%;
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 2.75rem; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.cursore::-webkit-slider-runnable-track {
  height: 1rem; border-radius: 999px;
  background: linear-gradient(to right, var(--viola) var(--pieno), var(--viola-chiaro) var(--pieno));
}
.cursore::-moz-range-track { height: 1rem; border-radius: 999px; background: var(--viola-chiaro); }
.cursore::-moz-range-progress { height: 1rem; border-radius: 999px; background: var(--viola); }
.cursore::-webkit-slider-thumb {
  -webkit-appearance: none; width: 2.75rem; height: 2.75rem; margin-top: -.875rem; border-radius: 50%;
  background: #fff; border: 6px solid var(--viola); box-shadow: 0 4px 0 var(--viola-rilievo);
  transition: transform .1s;
}
.cursore::-moz-range-thumb {
  width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border: 6px solid var(--viola); box-shadow: 0 4px 0 var(--viola-rilievo);
}
.cursore:active::-webkit-slider-thumb { transform: scale(1.1); }
.cursore:focus-visible { outline: none; }
.cursore:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.cursore:focus-visible::-moz-range-thumb { outline: 3px solid var(--fuoco); outline-offset: 3px; }

/* il numero grande con la stellina */
.numero-grande {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .15rem;
  font-weight: 900; font-size: 3.75rem; line-height: 1; letter-spacing: -.035em; color: var(--numero);
  margin-top: .3rem;
}
.numero-salto { display: inline-flex; align-items: baseline; gap: .12em; transform-origin: 50% 90%; }
.numero-grande .euro { font-size: .6em; letter-spacing: 0; }
.numero-grande .stellina { width: .62em; height: .62em; flex: none; margin: -.12em 0 0 .08em; }
@media (min-width: 900px) { .netto-mini .numero-grande { font-size: 4.75rem; } }

/* ---------------------------------------------------------------------------------------------------------
   percorsi: gettoni grandi
   --------------------------------------------------------------------------------------------------------- */
.percorsi { margin-bottom: 4rem; }
.percorsi h2, .usati h2 { margin-bottom: 1.5rem; }
.gettoni { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@media (min-width: 900px) { .gettoni { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.gettone {
  --g-tenue: var(--viola-tenue); --g-chiaro: var(--viola-chiaro); --g-pieno: var(--viola); --g-rilievo: var(--viola-rilievo); --g-icona: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; height: 100%;
  padding: 1.1rem 1rem 1.2rem; border-radius: 1.6rem;
  background: var(--g-tenue); border: 2px solid var(--g-chiaro); box-shadow: 0 5px 0 var(--g-chiaro);
  margin-bottom: 5px; color: var(--testo); text-decoration: none;
  transition: transform .08s, box-shadow .08s, border-color .15s;
}
.gettone[data-colore="verde"] { --g-tenue: var(--verde-tenue); --g-chiaro: var(--verde-chiaro); --g-pieno: var(--verde); --g-rilievo: var(--verde-rilievo); }
.gettone[data-colore="arancio"] { --g-tenue: var(--arancio-tenue); --g-chiaro: var(--arancio-chiaro); --g-pieno: var(--arancio); --g-rilievo: var(--arancio-rilievo); }
.gettone[data-colore="giallo"] { --g-tenue: var(--giallo-tenue); --g-chiaro: var(--giallo-chiaro); --g-pieno: #FACC15; --g-rilievo: #CA8A04; --g-icona: #422006; }
.gettone:hover { border-color: var(--g-pieno); }
.gettone:active { transform: translateY(5px); box-shadow: 0 0 0 var(--g-chiaro); }
.gettone-icona { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; background: var(--g-pieno); color: var(--g-icona); box-shadow: 0 4px 0 var(--g-rilievo); transform: rotate(-4deg); }
.gettone-icona .icona { width: 1.9rem; height: 1.9rem; stroke-width: 2.5; }
.gettone-nome { font-weight: 900; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -.01em; }
.gettone-riga { display: none; font-size: 1rem; color: var(--testo-2); line-height: 1.45; }
@media (min-width: 700px) { .gettone-riga { display: block; } }

/* i più usati (anche calcoli vicini e 404) */
.usati { margin-bottom: 4.5rem; }
.usati-lista { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; }
.usato {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .4rem 1.2rem .4rem .45rem;
  border-radius: 999px; background: var(--superficie); border: 2px solid var(--linea-2); box-shadow: 0 4px 0 var(--linea-2);
  margin-bottom: 4px; color: var(--testo); text-decoration: none; font-weight: 800; font-size: 1.0625rem;
  transition: transform .08s, box-shadow .08s, border-color .15s;
}
.usato:hover { border-color: var(--viola); }
.usato:active { transform: translateY(4px); box-shadow: none; }
.usato .disco { width: 2.25rem; height: 2.25rem; }

/* ---------------------------------------------------------------------------------------------------------
   piede
   --------------------------------------------------------------------------------------------------------- */
.piede { background: var(--fondo-2); border-radius: 2.5rem 2.5rem 0 0; padding: 2.5rem 0 3rem; margin-top: 2rem; }
.piede-dentro { display: grid; gap: 1.5rem; }
.piede-marchio { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.piede-motto { font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; }
.piede-link { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.piede-link a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px;
  background: var(--superficie); border: 2px solid var(--linea); color: var(--testo); font-weight: 800; text-decoration: none; font-size: 1rem;
}
.piede-link a:hover { border-color: var(--az); }
.piede-avviso { gap: .45rem; color: var(--az-testo) !important; border-color: var(--az-chiaro) !important; background: var(--az-tenue) !important; }
.piede-avviso .icona { width: 1.2rem; height: 1.2rem; flex: none; }
.piede-errore { font-weight: 700; max-width: 40rem; }
.piede-data { color: var(--testo-2); font-weight: 700; font-size: 1rem; }

/* ---------------------------------------------------------------------------------------------------------
   PAGINA DI UN CALCOLO · la fascia viola
   --------------------------------------------------------------------------------------------------------- */
.fascia { position: relative; overflow: hidden; background: var(--fascia); color: #fff; padding: .5rem 0 5rem; }
.fascia-cerchio { position: absolute; width: 14rem; height: 14rem; right: -4.5rem; bottom: -6.5rem; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin-left: -.5rem; }
.briciole li { display: inline-flex; align-items: center; }
.briciole a, .briciole [aria-current] {
  display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .5rem; border-radius: .8rem;
  color: #fff; font-weight: 800; font-size: 1rem;
}
.briciole a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); }
.briciole a:hover { text-decoration-color: #fff; }
.briciole [aria-current] { color: #EDE9FE; font-weight: 700; }
.briciola-freccia { width: 1.1rem; height: 1.1rem; opacity: .75; }
.fascia :focus-visible { outline-color: #fff; }
[data-tema="scuro"] .fascia :focus-visible { outline-color: var(--fuoco); }
.fascia-titolo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titolo disegno" "sotto sotto"; column-gap: 1rem; align-items: center; margin-top: .35rem; }
.fascia h1 { grid-area: titolo; font-size: clamp(2.375rem, 3vw + 1.4rem, 3.75rem); letter-spacing: -.03em; }
.fascia-sotto { grid-area: sotto; margin-top: .9rem; font-size: 1.1875rem; font-weight: 600; color: #F5F3FF; max-width: 38rem; }
.fascia-disegno { grid-area: disegno; position: relative; width: 5.75rem; transform: rotate(8deg); margin-right: .25rem; }
.fascia-disegno .disegno { width: 100%; height: auto; }
.fascia-disegno .stellina { position: absolute; width: 38%; left: -30%; top: -8%; transform: rotate(-8deg); }
.fascia-disegno .coriandolo { position: absolute; }
.fascia-disegno .c1 { width: 9%; aspect-ratio: 1; background: #86EFAC; right: -10%; top: 4%; }
.fascia-disegno .c2 { width: 22%; height: 7%; background: #F9A8D4; left: 4%; bottom: -14%; transform: rotate(-24deg); }
.fascia-disegno .c3 { width: 8%; aspect-ratio: 1; background: var(--giallo); right: 18%; bottom: -12%; }
@media (min-width: 900px) {
  .fascia { padding: 1rem 0 7rem; }
  .fascia-titolo { grid-template-areas: "titolo disegno" "sotto disegno"; column-gap: 3rem; }
  .fascia h1 { align-self: end; }
  .fascia-sotto { align-self: start; }
  .fascia-disegno { width: 9.5rem; margin-right: 3rem; }
}
.nojs { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--giallo-tenue); font-weight: 700; }

/* ---------------------------------------------------------------------------------------------------------
   il calcolo: risultato, campi, pulsanti
   --------------------------------------------------------------------------------------------------------- */
.calcolo { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: -3.5rem; }
@media (min-width: 960px) {
  .calcolo {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "esito campi" "azioni campi" "dettaglio campi"; gap: 1.5rem 2rem; margin-top: -5rem; align-items: start;
  }
  .dettaglio-blocco { grid-area: dettaglio; }
  .esito { grid-area: esito; }
  .campi { grid-area: campi; }
  .azioni { grid-area: azioni; }
}

.esito {
  background: var(--superficie); border: 4px solid var(--viola); border-radius: var(--r-grande);
  box-shadow: 0 8px 0 var(--viola-rilievo), var(--ombra-morbida); margin-bottom: 8px;
  padding: 1.4rem 1.25rem 1.5rem; transition: opacity .2s;
}
.esito.sbiadito { opacity: .45; }
.esito-etichetta { font-weight: 900; font-size: 1.25rem; color: var(--viola-testo); }
.esito-numero { font-size: min(3.75rem, 15vw); margin-top: .35rem; }
@media (min-width: 700px) { .esito-numero { font-size: 5rem; } }
@media (min-width: 1200px) { .esito-numero { font-size: 5.5rem; } }
.esito-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.esito-chips li { padding: .3rem .9rem; border-radius: 999px; background: var(--viola-tenue); color: var(--viola-testo); font-weight: 800; font-size: 1rem; }
.esito-frase { margin-top: 1rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.45; }
.esito-cento { margin-top: .6rem; color: var(--testo-2); font-weight: 600; }
.evidenzia { display: inline-block; padding: 0 .35rem; margin: 0 .1rem; border-radius: .45rem; background: var(--giallo); color: #1F2937; font-weight: 900; }
.esito-bonus { margin-top: .75rem; padding: .6rem .9rem; border-radius: 1rem; background: var(--verde-tenue); color: var(--verde-testo); font-weight: 800; }
.avvisi { list-style: none; margin-top: .75rem; display: grid; gap: .5rem; }
.avvisi li { padding: .6rem .9rem; border-radius: 1rem; background: var(--giallo-tenue); color: var(--testo); font-weight: 700; font-size: 1rem; }

.soldi { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 3px dashed var(--viola-chiaro); }
.soldi-titolo { font-size: 1.375rem; }
.barra { display: flex; height: 2.25rem; margin-top: 1rem; border-radius: 999px; overflow: hidden; background: var(--linea); }
.seg { flex: 1 1 0; min-width: 0; transition: flex-grow .45s cubic-bezier(.3, .8, .3, 1); }
.seg + .seg { border-left: 3px solid var(--superficie); }
.seg-b1 { background: var(--b-netto); } .seg-b2 { background: var(--b-contributi); } .seg-b3 { background: var(--b-irpef); }
.seg-b4 { background: var(--b-addizionali); } .seg-b5 { background: var(--b-5); } .seg-b6 { background: var(--b-6); }
.barra-nota { margin-top: .9rem; padding: .55rem .85rem; border-radius: .9rem; background: var(--verde-tenue); color: var(--verde-testo); font-weight: 800; font-size: 1rem; }
.legenda { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; margin-top: 1.1rem; }
.leg { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "colore nome" ". euro" ". quota"; column-gap: .55rem; line-height: 1.25; min-width: 0; }
.leg-euro { overflow-wrap: anywhere; }
.leg-colore { grid-area: colore; width: 1.05rem; height: 1.05rem; border-radius: .35rem; margin-top: .2rem; }
.leg-nome { grid-area: nome; font-weight: 800; }
.leg-euro { grid-area: euro; font-weight: 900; font-size: 1.3125rem; margin-top: .1rem; }
.leg-quota { grid-area: quota; color: var(--testo-2); font-weight: 700; font-size: 1rem; }
@media (min-width: 700px) { .legenda { grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); } }

/* i campi */
.campi {
  background: var(--superficie); border: 2px solid var(--linea); border-radius: var(--r-grande);
  box-shadow: 0 6px 0 var(--linea), var(--ombra-morbida); margin-bottom: 6px; padding: 1.4rem 1.25rem .5rem;
}
.campi-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1.25rem; }
.campi-testa h2 { font-size: 1.75rem; }
.nota-esempio {
  display: inline-flex; align-items: center; padding: .3rem .85rem; border-radius: 999px;
  background: var(--giallo); color: #422006; font-weight: 900; font-size: .9375rem; transform: rotate(-2deg);
}
.campi.cambiato .nota-esempio { display: none; }
.campo { border: 0; margin: 0 0 1.6rem; padding: 0; min-width: 0; }
.campo-nome { display: block; padding: 0; font-weight: 900; font-size: 1.25rem; line-height: 1.25; }
.campo-aiuto { margin: .3rem 0 .8rem; color: var(--testo-2); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.ral-riga { display: flex; align-items: flex-start; gap: .6rem; }
.ral-riga .con-unita { flex: 1; min-width: 0; }
.con-unita { position: relative; }
.con-unita.corto { max-width: 12rem; }
.con-unita input, .con-freccia select {
  width: 100%; height: 3.75rem; margin: 0;
  font: inherit; font-size: 1.5rem; font-weight: 900; color: var(--testo); letter-spacing: -.01em;
  background: var(--campo); border: 3px solid var(--bordo-campo); border-radius: 1.1rem;
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.con-unita input { padding: 0 2.75rem 0 1rem; font-variant-numeric: tabular-nums; }
.con-unita .unita { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 1.3rem; color: var(--testo-2); pointer-events: none; }
.con-freccia { position: relative; }
.con-freccia select { padding: 0 3rem 0 1rem; font-size: 1.25rem; font-weight: 800; cursor: pointer; }
.freccia-select { position: absolute; right: 1rem; top: 50%; width: 1.5rem; height: 1.5rem; transform: translateY(-50%); color: var(--viola-testo); pointer-events: none; stroke-width: 3; }
.con-unita input:hover, .con-freccia select:hover { border-color: var(--viola-chiaro); }
.con-unita input:focus, .con-freccia select:focus { outline: none; border-color: var(--viola); box-shadow: 0 0 0 5px var(--anello); }
.campo.errato input { border-color: var(--errore); background: var(--errore-tenue); }
.campo-errore:not(:empty) { margin-top: .55rem; color: var(--errore); font-weight: 800; }
.campo-errore:not(:empty)::before {
  content: ""; display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: .4rem; vertical-align: -.15rem; border-radius: 50%;
  background: currentColor;
  -webkit-mask: radial-gradient(circle at 50% 76%, #000 .09rem, transparent .1rem), linear-gradient(#000, #000) 50% 30% / .16rem .45rem no-repeat;
  mask: radial-gradient(circle at 50% 76%, #000 .09rem, transparent .1rem), linear-gradient(#000, #000) 50% 30% / .16rem .45rem no-repeat;
  opacity: .9;
}

/* le scelte: grossi tasti in rilievo */
.scelte { display: grid; gap: .7rem; }
.scelte-mesi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scelta { position: relative; display: block; cursor: pointer; }
.scelta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.faccia {
  display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.75rem; padding: .5rem .9rem;
  border: 2px solid var(--bordo-campo); border-radius: 1.1rem; background: var(--superficie); color: var(--testo);
  box-shadow: 0 5px 0 var(--rilievo-neutro); margin-bottom: 5px;
  transition: transform .08s ease-out, box-shadow .08s ease-out, background-color .15s, border-color .15s;
}
.faccia-grande { font-weight: 900; font-size: 1.5rem; line-height: 1; }
.faccia-piccola { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--testo-2); text-align: left; }
.scelta:hover .faccia { border-color: var(--viola); }
.scelta input:checked + .faccia { background: var(--viola); border-color: var(--viola); color: #fff; box-shadow: 0 5px 0 var(--viola-rilievo); }
.scelta input:checked + .faccia .faccia-piccola { color: #F5F3FF; }
.scelta input:focus-visible + .faccia { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.scelta:active .faccia { transform: translateY(5px); box-shadow: 0 0 0 var(--rilievo-neutro); }
.scelte-contributi .faccia { justify-content: flex-start; }
.scelte-contributi .faccia-grande { min-width: 5.25rem; font-size: 1.375rem; }

/* i pulsanti del risultato */
.azioni { display: grid; gap: .75rem; }
.azioni .tasto { width: 100%; }
.copiato:not(:empty) { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--verde-testo); }
.link-a-mano label { display: block; font-weight: 800; margin-bottom: .4rem; }
.link-a-mano input { width: 100%; height: 3rem; padding: 0 .9rem; font: inherit; font-size: 1rem; border: 2px solid var(--linea-2); border-radius: .9rem; background: var(--campo); color: var(--testo); }
@media (min-width: 560px) {
  .azioni { display: flex; flex-wrap: wrap; align-items: center; }
  .azioni .tasto { width: auto; }
  .copiato, .link-a-mano { flex-basis: 100%; }
}

/* il dettaglio */
.dettaglio-blocco { margin-top: .5rem; }
.dettaglio > summary { list-style: none; justify-content: center; max-width: 26rem; }
.dettaglio > summary::-webkit-details-marker { display: none; }
.dettaglio .se-aperto, .dettaglio[open] .se-chiuso { display: none; }
.dettaglio[open] .se-aperto { display: inline; }
.dettaglio-freccia { width: 1.4rem; height: 1.4rem; transition: transform .2s; }
.dettaglio[open] .dettaglio-freccia { transform: rotate(180deg); }
.dettaglio-dentro { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
.conto { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 2px solid var(--linea); border-radius: 1.5rem; }
.conto tr:last-child > :first-child { border-bottom-left-radius: calc(1.5rem - 2px); }
.conto tr:last-child > :last-child { border-bottom-right-radius: calc(1.5rem - 2px); }
.conto tr:first-child > :first-child { border-top-left-radius: calc(1.5rem - 2px); }
.conto tr:first-child > :last-child { border-top-right-radius: calc(1.5rem - 2px); }
.conto caption { text-align: left; font-weight: 900; font-size: 1.25rem; padding: 0 0 .6rem; }
.conto th, .conto td { padding: .8rem .6rem; border-top: 2px solid var(--linea); vertical-align: top; text-align: left; }
.conto tr:first-child th, .conto tr:first-child td { border-top: 0; }
.conto th { font-weight: 700; }
.conto td.cifre { overflow-wrap: anywhere; }   /* un valore di testo lungo va a capo invece di allargare la pagina */
.conto .riga-segno { width: 2rem; padding-left: 1rem; font-weight: 900; color: var(--viola-testo); }
.conto td.cifre { text-align: right; font-weight: 800; white-space: nowrap; padding-right: 1rem; }
.conto .totale { background: var(--viola-tenue); }
.conto .totale th, .conto .totale td { font-weight: 900; }
@media (max-width: 559px) {
  .conto { font-size: 1rem; }
  .conto th, .conto td { padding: .7rem .35rem; }
  .conto .riga-segno { width: 1.4rem; padding-left: .7rem; }
  .conto td.cifre { padding-right: .7rem; }
  .esempio-svolto { padding: 1.25rem .75rem; }
}
.riga-nota { display: block; font-size: .9375rem; color: var(--testo-2); font-weight: 600; margin-top: .15rem; }
.fette { list-style: none; margin-top: .4rem; display: grid; gap: .2rem; }
.fette li { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; color: var(--testo-2); font-weight: 600; }

.pubblicita {
  display: grid; place-items: center; height: 100px; margin-top: 3.5rem;
  border: 2px dashed var(--linea-2); border-radius: 1.5rem; color: var(--testo-2); font-weight: 800; font-size: .9375rem;
}
@media (min-width: 700px) { .pubblicita { height: 250px; } }

/* spiegazioni */
.spiega { margin-top: 4rem; }
.spiega h2 { margin-bottom: 1.4rem; }
.spiega h3 { margin: 2rem 0 .9rem; }
.passi { list-style: none; counter-reset: passo; display: grid; gap: 1rem; max-width: 46rem; }
.passi li { counter-increment: passo; position: relative; padding-left: 3.6rem; min-height: 2.6rem; }
.passi li::before {
  content: counter(passo); position: absolute; left: 0; top: -.1rem;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--viola); color: #fff; font-weight: 900; font-size: 1.25rem; box-shadow: 0 3px 0 var(--viola-rilievo);
}
.come-lato > h3:first-of-type { margin-top: 2rem; }
@media (min-width: 1100px) {
  .come { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
  .come h2 { grid-column: 1 / -1; }
  .come .esempio-svolto { margin-top: 0; }
}
.coppia { display: grid; }
@media (min-width: 1100px) { .coppia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; } }
.esempio-svolto { margin-top: 2rem; padding: 1.5rem 1.25rem; border-radius: var(--r-grande); background: var(--viola-tenue); max-width: 46rem; }
.esempio-svolto h3 { margin: 0 0 .6rem; }
.esempio-svolto p { font-weight: 700; margin-bottom: 1rem; }
.fonti { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.fonti a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--linea-2); font-weight: 800; text-decoration: none; }
.fonti a:hover { border-color: var(--viola); }
.controllato { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; font-weight: 800; color: var(--verde-testo); }
.controllato .icona { width: 1.6rem; height: 1.6rem; flex: none; }
.punti { list-style: none; display: grid; gap: .9rem; max-width: 46rem; }
.punti li { position: relative; padding-left: 2.1rem; }
.punti li::before { content: ""; position: absolute; left: .3rem; top: .5rem; width: .85rem; height: .85rem; border-radius: .3rem; background: var(--viola); transform: rotate(45deg); }
.domande-lista { display: grid; gap: .9rem; max-width: 50rem; }
.domanda { border: 2px solid var(--linea-2); border-radius: 1.4rem; background: var(--superficie); box-shadow: 0 4px 0 var(--linea-2); margin-bottom: 4px; }
.domanda summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.75rem; padding: .8rem 1.1rem; cursor: pointer; font-weight: 900; font-size: 1.125rem; line-height: 1.3; border-radius: 1.3rem;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda-segno { flex: none; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 50%; background: var(--viola-tenue); color: var(--viola-testo); stroke-width: 3; transition: transform .2s; }
.domanda[open] .domanda-segno { transform: rotate(45deg); }
.domanda[open] { border-color: var(--viola); }
.domanda p { padding: 0 1.1rem 1.2rem; max-width: 44rem; }
.passi-dopo { list-style: none; display: grid; gap: .9rem; }
@media (min-width: 900px) { .passi-dopo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.passo {
  --pp: var(--verde); --pp-tenue: var(--verde-tenue); --pp-testo: var(--verde-testo);
  display: flex; align-items: center; gap: .9rem; height: 100%; min-height: 5rem; padding: 1rem 1.1rem;
  border-radius: 1.5rem; background: var(--pp-tenue); border: 2px solid transparent; color: var(--testo); text-decoration: none;
  transition: border-color .15s, transform .08s;
}
.passo-tips { --pp: var(--arancio); --pp-tenue: var(--arancio-tenue); --pp-testo: var(--arancio-testo); }
.passo-percorso, .passo-tools { --pp: var(--viola); --pp-tenue: var(--viola-tenue); --pp-testo: var(--viola-testo); }
.passo .disco { width: 2.75rem; height: 2.75rem; }
.passo-percorso .disco, .passo-tools .disco { background: var(--viola); color: #fff; }
.passo-parole { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.passo-riga { font-size: .9375rem; font-weight: 800; color: var(--pp-testo); }
.passo-titolo { font-weight: 900; font-size: 1.125rem; line-height: 1.25; }
.passo-freccia { width: 1.5rem; height: 1.5rem; flex: none; color: var(--pp-testo); stroke-width: 3; }
.passo:hover { border-color: var(--pp); }
.passo:active { transform: translateY(2px); }
.stima { display: flex; align-items: flex-start; gap: .6rem; margin-top: 3rem; margin-bottom: 3rem; padding: 1rem 1.2rem; border-radius: 1.25rem; background: var(--fondo-2); font-weight: 700; color: var(--testo-2); }
.stima .icona { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .1rem; color: var(--viola-testo); }

/* la barra in basso sul telefono */
.barra-telefono {
  position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 30;
  transform: translateY(170%); visibility: hidden;
  transition: transform .25s cubic-bezier(.3, .8, .3, 1), visibility 0s linear .25s;
}
.barra-telefono.visibile { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.3, .8, .3, 1), visibility 0s; }
.barra-telefono button {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.75rem; padding: .5rem 1.1rem;
  font: inherit; color: #fff; background: var(--az); border: 0; border-radius: 1.3rem; cursor: pointer;
  box-shadow: 0 5px 0 var(--az-rilievo), 0 14px 28px -10px rgba(20, 10, 60, .5);
}
.bt-nome { flex: 1; min-width: 0; font-weight: 800; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.bt-numero { flex: none; margin-left: auto; font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; white-space: nowrap; }
.barra-telefono .icona { width: 1.5rem; height: 1.5rem; stroke-width: 3; }
@media (min-width: 700px) { .barra-telefono { display: none; } }
@media (max-width: 699px) { [data-pagina="stipendio"] .piede { padding-bottom: 7.5rem; } }

/* ---------------------------------------------------------------------------------------------------------
   404
   --------------------------------------------------------------------------------------------------------- */
.e404 { padding: 2rem 0 4rem; max-width: 46rem; }
.e404-disegno { width: 11rem; margin-bottom: 1.5rem; }
.e404-disegno .disegno { width: 100%; height: auto; }
.e404 h1 { font-size: clamp(2.5rem, 4vw + 1.5rem, 4.25rem); letter-spacing: -.03em; color: var(--viola-testo); }
.e404-testo { margin: 1rem 0 2rem; font-size: 1.25rem; font-weight: 600; }
.e404 h2 { font-size: 1.625rem; margin: 2.75rem 0 1rem; }
.e404-casa { margin-top: 2.5rem; }
.sbarra { transform-box: fill-box; transform-origin: 100% 50%; }

/* ---------------------------------------------------------------------------------------------------------
   movimento: il salto del numero, la stellina, gli adesivi (mai con «riduci movimento»)
   --------------------------------------------------------------------------------------------------------- */
@keyframes salto { 0% { transform: none; } 30% { transform: translateY(-.14em) scale(1.05); } 62% { transform: translateY(.03em) scale(.99); } 100% { transform: none; } }
@keyframes brilla { 0% { transform: scale(.4) rotate(-60deg); opacity: .3; } 55% { transform: scale(1.4) rotate(12deg); opacity: 1; } 100% { transform: none; } }
@keyframes entra { 0% { transform: translateY(1.2rem) scale(.6) rotate(var(--g, 0deg)); opacity: 0; } 70% { transform: translateY(-.2rem) scale(1.05) rotate(var(--g, 0deg)); opacity: 1; } 100% { transform: rotate(var(--g, 0deg)); } }
@keyframes saltello { 0%, 100% { transform: rotate(var(--g, 0deg)); } 35% { transform: translateY(-12%) rotate(calc(var(--g, 0deg) * -1)); } 65% { transform: translateY(2%) rotate(var(--g, 0deg)); } }
@keyframes scivola { 0%, 100% { transform: none; } 50% { transform: rotate(-14deg); } }
.salta-ora { animation: salto .5s cubic-bezier(.3, .7, .4, 1); }
.stellina.brilla { animation: brilla .65s cubic-bezier(.3, .7, .4, 1.3); }
.adesivo-tools { --g: -9deg; } .adesivo-tasks { --g: 8deg; } .adesivo-tips { --g: 4deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .adesivo { animation: entra .6s cubic-bezier(.3, .7, .4, 1.2) backwards; }
  .js .adesivo-tasks { animation-delay: .12s; } .js .adesivo-tips { animation-delay: .24s; }
  .adesivo.gioca { animation: saltello .55s cubic-bezier(.3, .7, .4, 1); }
  .e404 .sbarra { animation: scivola 2.8s ease-in-out 1s 2; }
}
.adesivi { pointer-events: auto; }
.adesivo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------------------------------------
   GIRO 3 · home inglese (il motto è più lungo: gli adesivi vanno sopra, in fila)
   --------------------------------------------------------------------------------------------------------- */
html[lang="en"] .motto { font-size: clamp(2.3rem, 3.9vw + 1.2rem, 5.25rem); }
@media (max-width: 899px) {
  html[lang="en"] .eroe { grid-template-columns: minmax(0, 1fr); grid-template-areas: "adesivi" "titolo" "sotto" "cerca"; }
  html[lang="en"] .motto { font-size: clamp(2.2rem, 10.2vw, 3.6rem); }
  html[lang="en"] .adesivi { aspect-ratio: 2.6 / 1; width: min(100%, 19rem); margin: .25rem 0 1.25rem; }
  html[lang="en"] .adesivo-tools { width: 31%; left: 1%; top: 4%; }
  html[lang="en"] .adesivo-tasks { width: 28%; left: 35%; right: auto; top: 13%; }
  html[lang="en"] .adesivo-tips { width: 29%; left: 67%; top: 0; bottom: auto; }
  html[lang="en"] .adesivi .stellina { width: 10%; right: 0; top: auto; bottom: 2%; }
  html[lang="en"] .adesivi .c1 { left: -2%; top: 88%; width: 3%; }
  html[lang="en"] .adesivi .c3 { left: 33%; top: -4%; width: 2.5%; }
  html[lang="en"] .adesivi .c2, html[lang="en"] .adesivi .c4 { display: none; }
  html[lang="en"] .adesivi .c5 { right: 34%; top: 92%; width: 2%; }
}
@media (max-width: 899px) { html[lang="en"] .netto-mini .numero-grande { font-size: min(3.75rem, 12.5vw); } }
.valuta-prima { margin-right: -.06em; }
.numero-salto:has(.valuta-prima) { gap: .06em; }
.centesimi { font-size: .5em; letter-spacing: 0; align-self: flex-start; margin-top: .12em; }

/* ---------------------------------------------------------------------------------------------------------
   la firma di Simone
   --------------------------------------------------------------------------------------------------------- */
.firma {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "foto titolo" "foto nome" "riga riga" "azioni azioni";
  gap: .15rem 1rem; align-items: center;
  margin-top: 4rem; margin-bottom: 1.5rem; padding: 1.5rem 1.25rem 1.6rem; border-radius: 2.25rem;
  background: var(--giallo-tenue); border: 3px solid var(--giallo-chiaro); box-shadow: 0 7px 0 var(--giallo-chiaro);
}
.firma-foto { grid-area: foto; position: relative; width: 5.75rem; height: 5.75rem; flex: none; border-radius: 50%; padding: .3rem;
  background: conic-gradient(from -30deg, var(--viola) 0 33.4%, var(--verde) 0 66.7%, var(--arancio) 0); }
.firma-foto img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: .25rem solid var(--giallo-tenue); background: var(--superficie); }
.firma-foto .coriandolo { position: absolute; }
.firma-foto .c1 { width: .7rem; height: .7rem; right: -.35rem; top: .2rem; background: var(--giallo); box-shadow: 0 0 0 2px var(--giallo-tenue); }
.firma-foto .c2 { width: 1.1rem; height: .45rem; left: -.6rem; bottom: .9rem; background: #F472B6; transform: rotate(-28deg); }
.firma-foto .c3 { width: .5rem; height: .5rem; right: .1rem; bottom: -.3rem; background: #4ADE80; }
.firma-testo { display: contents; }
.firma-titolo { grid-area: titolo; align-self: end; font-size: clamp(1.5rem, 1.4vw + 1.15rem, 2.25rem); }
.firma-nome { grid-area: nome; align-self: start; font-weight: 900; font-size: 1.125rem; color: var(--az-testo); }
.firma-riga { grid-area: riga; margin-top: 1rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.6; max-width: 46rem; }
.firma-azioni { grid-area: azioni; margin-top: 1.1rem; list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; }
.firma-azioni .tasto { min-height: 3.25rem; padding: .6rem 1.15rem; }
@media (max-width: 559px) {
  .firma-azioni { display: grid; grid-template-columns: 1fr 1fr; }
  .firma-azioni li:first-child { grid-column: 1 / -1; }
  .firma-azioni .tasto { width: 100%; padding-inline: .6rem; }
}
@media (min-width: 760px) {
  .firma { grid-template-areas: "foto titolo" "foto nome" "foto riga" "foto azioni"; gap: .2rem 2.25rem; align-items: start; padding: 2.25rem 2.5rem 2.4rem; }
  .firma-foto { width: 9.5rem; height: 9.5rem; padding: .4rem; align-self: center; }
  .firma-riga { margin-top: .75rem; }
}
[data-tema="scuro"] .firma { background: var(--superficie); border-color: #CA8A04; box-shadow: 0 7px 0 #854D0E; }
[data-tema="scuro"] .firma-foto img { border-color: var(--superficie); }

/* ---------------------------------------------------------------------------------------------------------
   l'anello «78 su 100» nel risultato dello stipendio
   --------------------------------------------------------------------------------------------------------- */
.esito {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem;
  grid-template-areas: "etichetta etichetta" "numero numero" "sotto sotto" "chips chips" "frase frase" "anello cento" "avvisi avvisi" "soldi soldi" "avviso avviso";
}
.esito-sotto { grid-area: sotto; margin-top: .35rem; font-weight: 800; color: var(--testo-2); }
.esito-etichetta { grid-area: etichetta; } .esito-numero { grid-area: numero; } .esito-chips { grid-area: chips; } .esito-frase { grid-area: frase; }
.esito .anello { grid-area: anello; margin-top: 1.1rem; } .esito-cento { grid-area: cento; align-self: center; margin-top: 1.1rem; }
.avvisi { grid-area: avvisi; } .soldi { grid-area: soldi; }
@media (min-width: 560px) {
  .esito { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etichetta anello" "numero anello" "sotto anello" "chips anello" "frase frase" "cento cento" "avvisi avvisi" "soldi soldi" "avviso avviso"; }
  .esito .anello { margin-top: 0; align-self: center; }
  .esito-cento { margin-top: .6rem; }
}
.anello { position: relative; width: 6.25rem; height: 6.25rem; flex: none; }
@media (min-width: 560px) { .anello { width: 8.75rem; height: 8.75rem; } }
.anello svg { width: 100%; height: 100%; overflow: visible; }
.anello-fondo { fill: none; stroke: var(--anello-fondo); stroke-width: 16; }
.anello-pieno { fill: none; stroke: var(--viola); stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.3, 1.3, .5, 1); }
[data-tema="scuro"] .anello-pieno { stroke: #A78BFA; }
.anello-dentro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.anello-numero { font-weight: 900; font-size: 1.875rem; letter-spacing: -.03em; color: var(--numero); }
.anello-su { font-weight: 800; font-size: .9375rem; color: var(--testo-2); margin-top: .15rem; }
@media (min-width: 560px) { .anello-numero { font-size: 2.5rem; } }

/* l'avviso breve: calmo, con la «i» disegnata */
.avviso-breve { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem; border-radius: 1.2rem; background: var(--fondo-2); border: 2px solid var(--linea); color: var(--testo); font-weight: 600; font-size: 1rem; line-height: 1.5; max-width: 50rem; }
.avviso-i { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--az); color: #fff; margin-top: -.05rem; }
.avviso-i .segno { width: 72%; height: 72%; stroke-width: 3.2; }
.esito-avviso { grid-area: avviso; margin-top: 1.4rem; }
.passo-dopo .avviso-breve { margin-bottom: 1.25rem; }

/* ---------------------------------------------------------------------------------------------------------
   CHECKLIST DEL TRASLOCO · mondo verde
   --------------------------------------------------------------------------------------------------------- */
.fascia-verde { background: var(--fascia-verde); }
.fascia-verde .fascia-sotto { color: #F0FDF4; }
.fascia-verde .briciole [aria-current] { color: #DCFCE7; }
.fascia-verde .fascia-disegno { width: 6.25rem; }
@media (min-width: 900px) { .fascia-verde .fascia-disegno { width: 10rem; } }

.lista-corpo { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: -3.5rem; }
.lista-lato { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 960px) {
  .lista-corpo { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 2rem; margin-top: -5rem; align-items: start; }
  .lista-lato { position: sticky; top: 1rem; }
}
.progresso {
  background: var(--superficie); border: 4px solid var(--verde); border-radius: var(--r-grande);
  box-shadow: 0 8px 0 var(--verde-rilievo), var(--ombra-morbida); padding: 1.4rem 1.25rem 1.3rem; margin-bottom: 8px;
}
.progresso-numero { display: flex; align-items: baseline; gap: .35rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.progresso-fatte { display: inline-block; font-size: 4rem; color: var(--verde-testo); transform-origin: 50% 90%; }
[data-tema="scuro"] .progresso-fatte { color: #86EFAC; }
.progresso-su { font-size: 1.75rem; color: var(--testo); white-space: pre; }
.progresso-barra { height: 1.75rem; margin-top: 1rem; border-radius: 999px; background: var(--verde-tenue); border: 2px solid var(--verde-chiaro); overflow: hidden; }
.progresso-pieno { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--verde); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14); transition: width .65s cubic-bezier(.3, 1.45, .5, 1); }
.progresso-tempo { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-weight: 700; color: var(--testo-2); }
.progresso-tempo b { color: var(--testo); }
.progresso-tempo .icona { width: 1.35rem; height: 1.35rem; flex: none; color: var(--verde-testo); }
.messaggio { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; padding: .75rem .9rem; border-radius: 1rem; font-weight: 800; line-height: 1.4; }
.messaggio .icona { width: 1.35rem; height: 1.35rem; flex: none; stroke-width: 3; margin-top: .05rem; }
.messaggio-bentornato { background: var(--verde-tenue); color: var(--verde-testo); }
.messaggio-memoria { background: var(--giallo-tenue); color: var(--testo); font-weight: 700; }
.progresso-azioni { display: grid; gap: .75rem; margin-top: 1.25rem; }
.progresso-azioni .tasto { width: 100%; }
@media (min-width: 560px) and (max-width: 959px) { .progresso-azioni { grid-template-columns: auto auto; justify-content: start; } .progresso-azioni .tasto { width: auto; } }
.conferma { margin-top: 1rem; padding: 1rem; border-radius: 1.2rem; background: var(--giallo-tenue); border: 2px solid var(--giallo-chiaro); }
.conferma p { font-weight: 900; font-size: 1.125rem; margin-bottom: .75rem; }
.conferma-tasti { display: flex; flex-wrap: wrap; gap: .6rem; }
.conferma-tasti .tasto { min-height: 3rem; }

.indice { display: none; }
@media (min-width: 960px) { .indice { display: block; } }
.indice ol { list-style: none; display: grid; gap: .25rem; }
.indice-voce { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .3rem .55rem; border-radius: 1rem; color: var(--testo); text-decoration: none; font-weight: 800; font-size: 1rem; }
.indice-voce:hover { background: var(--verde-tenue); }
.indice-numero { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--verde-tenue); color: var(--verde-testo); font-weight: 900; font-size: .9375rem; }
.indice-numero > * { grid-area: 1 / 1; }
.indice-spunta { width: 1.15rem; height: 1.15rem; stroke-width: 3.4; opacity: 0; }
.indice-voce.completa .indice-numero { background: var(--verde); color: #fff; }
.indice-voce.completa .indice-numero span { opacity: 0; }
.indice-voce.completa .indice-spunta { opacity: 1; }
.indice-voce[aria-current="step"] { background: var(--verde-tenue); box-shadow: inset 0 0 0 2px var(--verde); }
.indice-conto { margin-left: auto; color: var(--testo-2); font-weight: 800; font-size: .9375rem; }

.lista-fasi { display: grid; gap: 1.5rem; }
.fase { background: var(--superficie); border: 2px solid var(--linea); border-radius: 1.75rem; padding: 1.2rem .8rem .8rem; box-shadow: 0 5px 0 var(--linea); margin-bottom: 5px; scroll-margin-top: 1rem; transition: border-color .2s; }
.fase-testa { display: flex; align-items: center; gap: .75rem; margin: 0 .35rem .6rem; }
.fase-numero { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: .9rem; background: var(--verde); color: #fff; font-weight: 900; font-size: 1.25rem; box-shadow: 0 3px 0 var(--verde-rilievo); transform: rotate(-4deg); }
.fase-titolo { font-size: 1.5rem; }
.fase-conto { margin-left: auto; padding: .2rem .8rem; border-radius: 999px; background: var(--verde-tenue); color: var(--verde-testo); font-weight: 900; font-size: .9375rem; white-space: nowrap; }
.fase.completa { border-color: var(--verde); box-shadow: 0 5px 0 var(--verde-chiaro); }
.fase.completa .fase-conto { background: var(--verde); color: #fff; }
.voci { list-style: none; display: grid; gap: .2rem; }
.voce-riga { position: relative; display: flex; align-items: flex-start; gap: .85rem; min-height: 3.5rem; padding: .7rem .6rem; border-radius: 1.1rem; cursor: pointer; transition: background-color .15s; -webkit-tap-highlight-color: transparent; }
/* lo sfondo verde colora tutta la voce, testo e nota insieme: prima colorava solo la riga cliccabile, che
   (essendo posizionata) si disegnava sopra la prima riga della nota e la copriva a metà */
.voce { border-radius: 1.1rem; transition: background-color .15s; }
.voce:has(.voce-riga:hover), .voce:has(input:checked) { background: var(--verde-tenue); }
.voce-riga input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.casella { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; border: 3px solid var(--bordo-campo); background: var(--campo); color: #fff; box-shadow: 0 3px 0 var(--linea-2); transition: background-color .15s, border-color .15s, transform .1s; }
.casella .icona { width: 1.45rem; height: 1.45rem; stroke-width: 3.6; opacity: 0; transform: scale(.3) rotate(-20deg); transition: opacity .1s, transform .3s cubic-bezier(.3, 1.7, .5, 1); }
.voce-riga input:checked + .casella { background: var(--verde); border-color: var(--verde); box-shadow: 0 3px 0 var(--verde-rilievo); }
.voce-riga input:checked + .casella .icona { opacity: 1; transform: none; }
.voce-riga input:focus-visible + .casella { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.voce-riga:active .casella { transform: translateY(3px); box-shadow: none; }
.voce-testo { font-weight: 700; font-size: 1.125rem; line-height: 1.4; padding-top: .2rem; }
.voce-riga input:checked ~ .voce-testo { color: var(--testo-2); }

.voce-nota { margin: -.45rem 0 0 3.7rem; padding: 0 .6rem .8rem 0; color: var(--testo-2); font-size: 1rem; line-height: 1.45; font-weight: 600; }
.capolinea { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 1.75rem; border: 3px dashed var(--verde-chiaro); transition: background-color .3s, border-color .3s; }
.capolinea-icona { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: 1.1rem; background: var(--verde-tenue); color: var(--verde-testo); }
.capolinea-icona .icona { width: 2rem; height: 2rem; }
.capolinea-nome { font-weight: 900; font-size: 1.5rem; }
.capolinea-conto { margin-left: auto; font-weight: 900; color: var(--testo-2); white-space: nowrap; }
.capolinea.arrivato { border-style: solid; border-color: var(--verde); background: var(--verde); color: #fff; box-shadow: 0 6px 0 var(--verde-rilievo); }
.capolinea.arrivato .capolinea-icona { background: #fff; color: var(--verde); }
.capolinea.arrivato .capolinea-conto { color: #fff; }
.mondo-tasks .passo-dopo { margin-top: 4rem; }

/* i coriandoli della fine (1 secondo, mai con «riduci movimento») */
.coriandoli { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.coriandoli > * { transform-box: fill-box; transform-origin: center; animation: vola 1s cubic-bezier(.15, .7, .35, 1) forwards; }
@keyframes vola { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.progresso-fatte.salta-ora { animation: salto .5s cubic-bezier(.3, .7, .4, 1); }

/* il foglio stampato non esiste sullo schermo */
table.foglio, table.foglio > tbody, table.foglio > tbody > tr, table.foglio > tbody > tr > td { display: contents; }
table.foglio > tfoot, .pdf-piede, .stampa-testa { display: none; }

/* ---------------------------------------------------------------------------------------------------------
   IL SITO VERO · pezzi generici dei calcoli (qualunque campo, qualunque risultato)
   --------------------------------------------------------------------------------------------------------- */
.numero-salto { display: inline-block; white-space: nowrap; }
.numero-salto .valuta-segno { font-size: .6em; letter-spacing: 0; }
.numero-salto .spazio { font-size: .6em; }
.numero-salto .centesimi { font-size: .5em; letter-spacing: 0; vertical-align: .72em; }
.numero-salto .unita-grande { font-size: .45em; letter-spacing: 0; }
/* le scelte in fila: larghe uguali, e se le parole non ci stanno (telefono stretto, testo grande) vanno a capo da sole */
.scelte-fila { display: flex; flex-wrap: wrap; }
.scelte-colonna { grid-template-columns: minmax(0, 1fr); }
.scelte-colonna .faccia { justify-content: flex-start; }
.scelte-colonna .faccia-grande { min-width: 6.5rem; font-size: 1.1875rem; }
.scelte-fila .faccia-grande { font-size: 1.25rem; text-align: center; }
.faccia-grande { font-variant-numeric: tabular-nums; }
.con-unita.prima input { padding: 0 1rem 0 2.6rem; }
.con-unita.prima .unita { left: 1rem; right: auto; }
.campi .cursore { width: 100%; margin-top: .9rem; }
.campo-valuta { padding-bottom: 1.4rem; border-bottom: 2px dashed var(--linea); }
.tabella-scorre { overflow-x: auto; border: 2px solid var(--linea); border-radius: 1.5rem; background: var(--superficie); }
.tabella-scorre:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.piano { width: 100%; border-collapse: collapse; font-size: 1rem; }
.piano caption { text-align: left; font-weight: 900; font-size: 1.25rem; padding: 1rem 1rem .5rem; }
.piano th, .piano td { padding: .6rem .8rem; border-top: 2px solid var(--linea); white-space: nowrap; text-align: right; }
.piano th[scope="col"] { font-weight: 800; color: var(--testo-2); font-size: .9375rem; }
.piano th[scope="row"] { text-align: left; font-weight: 900; }
.piano tbody tr:nth-child(odd) { background: var(--fondo-2); }
.nome-vero { font-weight: 900; font-size: 1.375rem; letter-spacing: -.02em; line-height: 2.75rem; }

/* i campi con le unità di misura (blocco 2) e l'interruttore metrico · USA · Regno Unito */
.caselle { display: flex; gap: .6rem; flex: 1; min-width: 0; }
.caselle .con-unita, .caselle .con-unita.corto { flex: 1; min-width: 0; max-width: none; }
.caselle .con-unita input { padding: 0 2.6rem 0 .9rem; }
.scelte-fila .scelta { display: flex; flex: 1 1 0; min-width: min-content; }
.scelte-fila .faccia { flex: 1; }
.faccia-sistema { flex-direction: column; justify-content: center; gap: .15rem; text-align: center; }
.faccia-sistema .faccia-grande { font-size: 1.125rem; }
.faccia-sistema .faccia-piccola { text-align: center; font-size: .9375rem; }
.campo-sistema { padding-bottom: 1.4rem; border-bottom: 2px dashed var(--linea); }

/* le fasce senza riquadro sopra (hub, guide, percorsi, pagine fisse) */
.fascia-semplice { padding-bottom: 2.5rem; }
@media (min-width: 900px) { .fascia-semplice { padding-bottom: 3.25rem; } }
.fascia-arancio { background: var(--fascia-arancio); }
.fascia-arancio .fascia-sotto { color: #FFF7ED; }
.fascia-arancio .briciole [aria-current] { color: #FFEDD5; }
.fascia-chip { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(0, 0, 0, .2); font-weight: 800; }
.fascia-chip .icona { width: 1.2rem; height: 1.2rem; }

/* HUB dei tre Empire */
.hub { margin-top: 2.5rem; display: grid; gap: 2.75rem; }
.hub-area h2 { font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); margin-bottom: 1rem; }
.hub-lista { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
@media (min-width: 700px) { .hub-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hub-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-voce {
  --g-tenue: var(--viola-tenue); --g-chiaro: var(--viola-chiaro); --g-pieno: var(--viola); --g-rilievo: var(--viola-rilievo); --g-icona: #fff;
  display: flex; align-items: center; gap: .9rem; height: 100%; min-height: 5.25rem; padding: 1rem 1.05rem; border-radius: 1.6rem;
  background: var(--g-tenue); border: 2px solid var(--g-chiaro); box-shadow: 0 5px 0 var(--g-chiaro); margin-bottom: 5px;
  color: var(--testo); text-decoration: none; transition: transform .08s, box-shadow .08s, border-color .15s;
}
.hub-voce[data-colore="verde"] { --g-tenue: var(--verde-tenue); --g-chiaro: var(--verde-chiaro); --g-pieno: var(--verde); --g-rilievo: var(--verde-rilievo); }
.hub-voce[data-colore="arancio"] { --g-tenue: var(--arancio-tenue); --g-chiaro: var(--arancio-chiaro); --g-pieno: var(--arancio); --g-rilievo: var(--arancio-rilievo); }
.hub-voce[data-colore="giallo"] { --g-tenue: var(--giallo-tenue); --g-chiaro: var(--giallo-chiaro); --g-pieno: #FACC15; --g-rilievo: #CA8A04; --g-icona: #422006; }
a.hub-voce:hover { border-color: var(--g-pieno); }
a.hub-voce:active { transform: translateY(5px); box-shadow: 0 0 0 var(--g-chiaro); }
.hub-voce .gettone-icona { flex: none; }
.hub-voce .passo-freccia { width: 1.5rem; height: 1.5rem; flex: none; color: var(--testo-2); stroke-width: 3; }
.hub-parole { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.hub-titolo { font-weight: 900; font-size: 1.1875rem; line-height: 1.25; }
.hub-riga { color: var(--testo-2); font-size: 1rem; line-height: 1.4; margin-top: .2rem; }
.hub-futura { background: var(--superficie); border: 2px dashed var(--linea-2); box-shadow: none; color: var(--testo-2); }
.hub-futura .gettone-icona { background: var(--fondo-2); box-shadow: none; }
.hub-futura .hub-titolo { color: var(--testo-2); }
.hub-arrivo { display: inline-flex; margin-top: .35rem; padding: .05rem .6rem; border-radius: 999px; background: var(--giallo-tenue); border: 1.5px solid var(--giallo-chiaro); color: var(--testo); font-weight: 800; font-size: .9375rem; }

/* GUIDA */
.guida { margin-top: 2.5rem; }
.guida > * { max-width: 46rem; }
.guida p { margin-top: 1rem; font-size: 1.1875rem; line-height: 1.65; }
.in-breve { padding: 1.4rem 1.4rem 1.2rem; border-radius: 1.75rem; background: var(--arancio-tenue); border: 2px solid var(--arancio-chiaro); }
.in-breve h2 { font-size: 1.375rem; color: var(--arancio-testo); }
.in-breve ul { list-style: none; margin-top: .6rem; display: grid; gap: .5rem; }
.in-breve li { position: relative; padding-left: 1.6rem; font-weight: 700; }
.in-breve li::before { content: ""; position: absolute; left: .2rem; top: .55rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--arancio); }
.guida-sezione { margin-top: 2.75rem; }
.guida-sezione h2 { font-size: clamp(1.625rem, 1.5vw + 1.2rem, 2.125rem); }
.guida-sezione .passi, .guida-sezione .punti { margin-top: 1.1rem; }
.guida-riquadro { margin-top: 1.25rem; }
.esperienza { margin: 2.5rem 0 0; padding: 1.2rem 1.4rem; border-left: 6px solid var(--arancio); background: var(--fondo-2); border-radius: 0 1.25rem 1.25rem 0; }
.esperienza p { margin: 0; font-style: italic; }
.esperienza footer { margin-top: .5rem; font-weight: 800; color: var(--testo-2); }
.guida .fonti { margin-top: .6rem; }
.guida h3 { margin-top: 2.5rem; }

/* PERCORSO */
.percorso-corpo { margin-top: 2.5rem; }
.percorso-corpo > * { max-width: 50rem; }
.percorso-intro { font-size: 1.1875rem; font-weight: 600; margin-bottom: .8rem; }
.percorso-corpo h2 { margin: 2.25rem 0 1rem; }
.fermate { list-style: none; display: grid; gap: .8rem; }
.fermata { --pp-tenue: var(--viola-tenue); display: flex; align-items: center; gap: .8rem; min-height: 4.75rem; padding: .8rem 1rem; border-radius: 1.4rem; background: var(--pp-tenue); border: 2px solid transparent; color: var(--testo); text-decoration: none; }
a.fermata:hover { border-color: var(--pp, var(--viola)); }
.fermata-numero { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--testo); color: var(--fondo); font-weight: 900; }
.fermata-futura { background: var(--superficie); border: 2px dashed var(--linea-2); color: var(--testo-2); }

/* PAGINE FISSE (chi sono, note legali) */
.fissa { margin-top: 2.5rem; }
.fissa > * { max-width: 52rem; }
.profilo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 2rem; align-items: center; padding: 1.5rem 1.4rem; border-radius: 2.25rem; background: var(--giallo-tenue); border: 3px solid var(--giallo-chiaro); box-shadow: 0 7px 0 var(--giallo-chiaro); margin-bottom: 7px; }
@media (max-width: 599px) { .profilo { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.profilo .firma-foto { grid-area: auto; }
.profilo .profilo-foto { width: 8rem; height: 8rem; }
@media (min-width: 700px) { .profilo { padding: 2rem 2.25rem; } .profilo .profilo-foto { width: 11rem; height: 11rem; } }
.profilo-nome { font-weight: 900; font-size: 1.75rem; line-height: 1.15; }
.profilo .firma-riga { margin-top: .6rem; }
.profilo .firma-azioni { margin-top: 1.1rem; }
[data-tema="scuro"] .profilo { background: var(--superficie); border-color: #CA8A04; box-shadow: 0 7px 0 #854D0E; }
[data-tema="scuro"] .profilo .firma-foto img { border-color: var(--superficie); }
.fissa-sezione { margin-top: 2.75rem; }
.fissa-sezione h2 { font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); margin-bottom: .4rem; }
.fissa-sezione p { margin-top: .8rem; font-size: 1.125rem; line-height: 1.65; }
.avviso-lungo { padding: 1.5rem 1.4rem; border-radius: 1.75rem; background: var(--fondo-2); border: 2px solid var(--linea); }
.fonti-blocco { margin-top: 1.5rem; }
.fonti-blocco h3 { margin: 0 0 .7rem; }

/* 404: la parte inglese */
.e404-en { margin-top: 3.5rem; padding-top: 2rem; border-top: 3px dashed var(--linea-2); }
.e404-en h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); color: var(--viola-testo); margin: 0; }
.e404-en .usati-lista { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------------------------------------------
   STAMPA E PDF: solo intestazione, risultato (o la lista) e dettaglio; in fondo a ogni pagina il sito, la data,
   l'avviso, Simone e il QR del suo sito. Bello anche in bianco e nero.
   --------------------------------------------------------------------------------------------------------- */
/* «La mia app»: il riquadro con l'app di Simone adatta alla pagina (contenuti/app.mjs), sopra la firma */
.app-mia { margin-top: 3.5rem; }
.app-etichetta { display: inline-block; margin: 0 0 .7rem .25rem; padding: .3rem .85rem; border-radius: 999px; background: var(--az-tenue); color: var(--az-testo);
  font-weight: 900; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.app-scheda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; padding: 1.3rem 1.25rem 1.4rem;
  border-radius: 2.25rem; background: var(--superficie); border: 3px solid var(--az-chiaro); box-shadow: 0 7px 0 var(--az-chiaro); }
.app-icona { display: block; width: 3.75rem; height: 3.75rem; border-radius: 23%; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
.app-nome { font-size: clamp(1.375rem, 1vw + 1.1rem, 1.875rem); line-height: 1.15; }
.app-motto { margin-top: .25rem; font-weight: 900; font-size: 1.125rem; color: var(--az-testo); }
.app-riga { margin-top: .65rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.55; max-width: 44rem; }
.app-tasti { margin-top: 1.1rem; list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; }
.app-tasti .tasto { min-height: 3.25rem; padding: .6rem 1.15rem; }
.app-nota { margin-top: .9rem; font-size: .9375rem; font-weight: 700; line-height: 1.5; color: var(--testo-2); }
.app-nota a { color: var(--az-testo); font-weight: 800; }
@media (max-width: 559px) {
  /* sul telefono accanto all'immagine solo nome e motto; testo, tasti e nota prendono tutta la larghezza */
  .app-scheda { grid-template-areas: "icona nome" "icona motto" "riga riga" "tasti tasti" "nota nota"; row-gap: 0; }
  .app-testo { display: contents; }
  .app-icona { grid-area: icona; align-self: center; }
  .app-nome { grid-area: nome; align-self: end; }
  .app-motto { grid-area: motto; }
  .app-riga { grid-area: riga; margin-top: 1rem; }
  .app-tasti { grid-area: tasti; display: grid; grid-template-columns: minmax(0, 1fr); }
  .app-nota { grid-area: nota; }
  .app-tasti .tasto { width: 100%; }
}
@media (min-width: 760px) {
  .app-scheda { gap: 1rem 2rem; padding: 2rem 2.5rem 2.2rem; }
  .app-icona { width: 5.5rem; height: 5.5rem; }
}

@media print {
  :root, :root[data-tema="scuro"], .mondo-tasks, .mondo-tools {
    --fondo: #fff; --superficie: #fff; --campo: #fff; --testo: #000; --testo-2: #333; --linea: #999; --linea-2: #999; --bordo-campo: #000;
    --viola-testo: #000; --viola-tenue: #eee; --verde-testo: #000; --verde-tenue: #eee; --numero: #000; --az-testo: #000;
    --b-netto: #444; --b-contributi: #888; --b-irpef: #bbb; --b-addizionali: #ddd; --anello-fondo: #ddd;
  }
  @page { size: A4; margin: 12mm 14mm 8mm; }
  body { font-size: 10.5pt; background: #fff; color: #000; }
  .salta, .testata, .fascia, .campi, .azioni, .azioni-pdf, .pubblicita, .spiega, .stima, .piede, .firma, .app-mia, .barra-telefono, .dettaglio > summary, noscript,
  .stellina, .esito-avviso, .lista-lato, .capolinea, .coriandoli { display: none !important; }
  table.foglio { display: table; width: 100%; border-collapse: collapse; }
  table.foglio > tbody { display: table-row-group; }
  table.foglio > tbody > tr { display: table-row; }
  table.foglio > tbody > tr > td { display: table-cell; padding: 0; vertical-align: top; }
  table.foglio > tfoot { display: table-footer-group; }
  table.foglio > tfoot > tr { display: table-row; }
  table.foglio > tfoot > tr > td { display: table-cell; height: 31mm; padding: 0; }
  .pdf-piede {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 27mm; align-items: flex-end; gap: 6mm;
    padding-top: 2.5mm; border-top: 1.2pt solid #000; background: #fff; color: #000; font-size: 8.5pt; line-height: 1.35;
  }
  .pdf-testo { flex: 1; min-width: 0; }
  .pdf-avviso { font-weight: 700; margin-bottom: 1.4mm; }
  .pdf-riga { margin-top: .6mm; }
  .pdf-qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: .8mm; width: 24mm; font-size: 8pt; font-weight: 700; text-align: center; line-height: 1.15; }
  .pdf-qr svg { display: block; width: 18mm; height: 18mm; }
  .stampa-testa { display: block; margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 1.2pt solid #000; }
  .stampa-nome { font-weight: 900; font-size: 17pt; margin-bottom: 1.5mm; }
  .dentro { width: auto; }
  .calcolo { display: block; margin: 0; }
  .esito { border: 1.5pt solid #000; box-shadow: none; padding: 5mm; break-inside: avoid; }
  .esito-numero { font-size: 34pt; }
  .anello { width: 28mm; height: 28mm; }
  .anello-numero { font-size: 17pt; }
  .anello-su { font-size: 8pt; }
  .anello-pieno { stroke: #333 !important; }
  .esito-chips { gap: 4mm; }
  .esito-chips li, .evidenzia { background: none; color: #000; padding: 0; }
  .soldi { border-top-color: #999; }
  .barra, .seg, .anello, .progresso-pieno { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dettaglio-blocco { margin-top: 6mm; }
  .dettaglio-dentro { display: block; }
  .tabella-scorre { overflow: visible; border: 1.2pt solid #999; border-radius: 3mm; }
  .piano { font-size: 8.5pt; }
  .piano th, .piano td { padding: 1.2mm 2mm; }
  .piano tr { break-inside: avoid; }
  .piano tbody tr:nth-child(odd) { background: #f2f2f2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .esito-sotto { color: #000; }
  .conto { margin-bottom: 5mm; break-inside: avoid; border-color: #999; }
  .conto .totale { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* la checklist: caselle vuote, voci che non si spezzano */
  .lista-corpo { display: block; margin: 0; }
  .lista-fasi { display: block; }
  .fase { border: 1.2pt solid #999; border-radius: 4mm; box-shadow: none; padding: 3mm 4mm 2mm; margin: 0 0 4mm; }
  .fase-testa { break-after: avoid; margin: 0 0 1.5mm; }
  .fase-numero { width: 7mm; height: 7mm; border-radius: 2mm; background: #fff; color: #000; border: 1.2pt solid #000; box-shadow: none; transform: none; font-size: 11pt; }
  .fase-titolo { font-size: 13pt; }
  .fase-conto { display: none; }
  .voce { break-inside: avoid; }
  .voce, .voce:has(input:checked), .voce-riga { background: none !important; }
  .voce-riga input:checked ~ .voce-testo { color: #000; }
  .voce-riga { min-height: 0; padding: 1.3mm 0; gap: 3mm; }
  .casella, .voce-riga input:checked + .casella { width: 5mm; height: 5mm; border: 1.2pt solid #000 !important; border-radius: 1.2mm; background: #fff !important; box-shadow: none !important; }
  .casella .icona { display: none; }
  .voce-riga input:checked ~ .voce-testo { text-decoration: none; color: #000; }
  .voce-testo { font-size: 10.5pt; padding: 0; }
  .voce-nota { margin: 0 0 1mm 8mm; font-size: 9pt; }
}