@font-face { font-family: Syne; src: url('/sito-assets/Syne-Variable.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }
html:root {
  color-scheme: light;
  --tenue: color-mix(in srgb, var(--colore-inchiostro) calc(var(--velo-testo-tenue) * 100%), var(--fondo-pagina));
  --griglia: color-mix(in srgb, var(--colore-accento) calc(var(--velo-griglia) * 100%), transparent);
  --ritmo: var(--spazio-largo);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--spazio-largo) * 3); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo-pagina); color: var(--colore-inchiostro); font-family: Syne, system-ui, sans-serif; font-size: var(--testo-titolo); line-height: 1.55; }
a { color: inherit; }
button, a { touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--peso-forte); line-height: 1.06; }
h2 { font-size: clamp(var(--testo-numero), 4vw, var(--testo-numero-grosso)); letter-spacing: -.045em; }
h3 { font-size: var(--testo-sezione); letter-spacing: -.03em; }
p { color: var(--tenue); }
::selection { background: var(--colore-azione); color: var(--colore-inchiostro); }
:focus-visible { outline: var(--spazio-stretto) solid var(--colore-accento); outline-offset: var(--spazio-stretto); }
.contenitore { width: min(calc(100% - var(--spazio-largo) * 2), var(--misura-tre-colonne)); margin-inline: auto; }
.salta { position: absolute; top: calc(var(--spazio-fondo-pagina) * -2); left: var(--spazio-pagina); z-index: 10; padding: var(--spazio-fra-carte); background: var(--colore-azione); }
.salta:focus { top: var(--spazio-pagina); }
.barra { background: var(--colore-lastra); color: var(--fondo-pagina); }
.barra-interno { min-height: calc(var(--spazio-largo) * 2 + var(--spazio-pagina)); display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-fra-sezioni); }
.marchio { display: inline-block; flex-shrink: 0; }
.marchio img { width: var(--misura-marchio); }
.navigazione { display: flex; gap: var(--spazio-largo); align-items: center; margin-left: auto; font-size: var(--testo-corpo); font-weight: var(--peso-medio); }
.navigazione a { text-decoration: none; }
.navigazione a:hover { color: var(--colore-azione); }
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-fra-sezioni); min-height: var(--misura-numero-in-riga); padding: var(--spazio-fra-carte) var(--spazio-fra-sezioni); border-radius: var(--raggio-controllo); border: 1px solid transparent; font-size: var(--testo-corpo); font-weight: var(--peso-forte); text-decoration: none; line-height: 1.3; transition: transform .2s, background .2s; }
.bottone:hover { transform: translateY(-2px); }
.bottone.lime { background: var(--colore-azione); color: var(--colore-sopra-azione); }
.bottone.blu { background: var(--colore-accento); color: var(--colore-sopra-l-accento); }
.bottone.bordo { border-color: var(--colore-inchiostro); }
.freccia { font-size: var(--testo-sezione); line-height: 1; font-weight: var(--peso-normale); }
.etichetta { font-size: var(--testo-secondario); font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; }
.etichetta.blu, .numero { color: var(--colore-accento); }
.quadretti { background-image: linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px); background-size: var(--misura-passo-griglia) var(--misura-passo-griglia); }
.apertura { position: relative; padding-block: calc(var(--ritmo) * 2); }
.hero-griglia { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--ritmo); }
.hero-testo { position: relative; z-index: 1; }
.hero-testo .etichetta { display: flex; align-items: center; gap: var(--spazio-fra-carte); margin-bottom: var(--spazio-fra-sezioni); }
.punto { width: var(--spazio-fra-blocchi); height: var(--spazio-fra-blocchi); background: var(--colore-accento); border-radius: var(--raggio-pillola); }
h1 { font-size: clamp(var(--testo-numero-grosso), 6.5vw, calc(var(--testo-numero-grosso) * 1.5)); line-height: .98; letter-spacing: -.065em; }
h1 span { color: var(--colore-accento); }
.intro { max-width: var(--misura-colonna-di-lettura); margin-block: var(--spazio-fra-sezioni); }
.azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-fra-carte); align-items: center; }
.micro { font-size: var(--testo-secondario); margin-top: var(--spazio-pagina); }
.tavola { position: relative; min-width: 0; padding: var(--spazio-fra-sezioni) 0; }
.tavola-fondo { display: flex; justify-content: space-between; gap: var(--spazio-fra-carte); border-top: 1px solid var(--colore-inchiostro); padding-block: var(--spazio-fra-carte); font-size: var(--testo-didascalia); font-weight: var(--peso-medio); letter-spacing: .08em; text-transform: uppercase; }
.tavola-oggetto { position: relative; isolation: isolate; }
.tavola img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.indice { background: var(--colore-accento); color: var(--colore-sopra-l-accento); }
.indice-interno { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spazio-fra-sezioni); padding-block: var(--spazio-pagina); font-size: var(--testo-secondario); font-weight: var(--peso-forte); letter-spacing: .1em; }
.indice span { display: inline-flex; align-items: center; gap: var(--spazio-fra-carte); }
.indice b { color: var(--colore-azione); font-size: var(--testo-titolo); }
.sezione { padding-block: calc(var(--ritmo) * 3); }
.sezione-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ritmo); margin-bottom: calc(var(--ritmo) * 1.5); }
.sezione-testa h2 { max-width: var(--misura-colonna-di-lettura); margin-top: var(--spazio-pagina); }
.sezione-testa > p { max-width: calc(var(--misura-colonna-di-lettura) * .6); font-size: var(--testo-corpo); }
.funzioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-fra-sezioni); }
.funzione { position: relative; overflow: hidden; border: 1px solid var(--fondo-separatore); border-radius: var(--raggio-carta); padding: var(--ritmo); background: var(--fondo-superficie); }
.funzione.grande { grid-row: span 2; display: flex; flex-direction: column; }
.numero { display: block; font-size: var(--testo-secondario); font-weight: var(--peso-forte); letter-spacing: .12em; margin-bottom: var(--spazio-fra-sezioni); }
.funzione h3 { max-width: var(--misura-colonna-di-lettura); margin-bottom: var(--spazio-pagina); }
.funzione p { font-size: var(--testo-corpo); }
.form-check-figura { margin-block: var(--spazio-fra-sezioni); }
.form-check-disegno { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.form-check-figura figcaption { display: flex; flex-wrap: wrap; gap: var(--spazio-fra-blocchi) var(--spazio-pagina); margin-top: var(--spazio-fra-carte); font-size: var(--testo-secondario); }
.form-check-esempio { color: var(--colore-accento); font-weight: var(--peso-forte); }
.dettaglio { display: flex; flex-wrap: wrap; gap: var(--spazio-fra-blocchi); margin-top: auto; }
.dettaglio span { padding: var(--spazio-fra-blocchi) var(--spazio-fra-carte); border: 1px solid var(--fondo-separatore); border-radius: var(--raggio-pillola); font-size: var(--testo-secondario); }
.funzione.coach { background: var(--colore-accento); color: var(--colore-sopra-l-accento); border-color: var(--colore-accento); }
.coach p, .coach .numero { color: var(--colore-sopra-l-accento); }
.coach .numero { color: var(--colore-azione); }
.simbolo { float: right; color: var(--colore-azione); font-size: var(--testo-numero-grosso); line-height: .8; }
.nutrizione { width: var(--misura-oggetto-hero); max-width: 42%; float: right; margin: 0 calc(var(--spazio-pagina) * -1) var(--spazio-fra-carte) var(--spazio-fra-carte); }
.progressi { display: flex; align-items: flex-start; gap: var(--ritmo); padding-top: var(--ritmo); margin-top: var(--ritmo); border-top: 1px solid var(--fondo-separatore); }
.progressi .numero { margin: var(--spazio-fra-blocchi) 0 0; }
.progressi h3 { margin-bottom: var(--spazio-fra-carte); }
.progressi p { max-width: var(--misura-colonna-di-lettura); font-size: var(--testo-corpo); }
.progressi-segno { margin-left: auto; flex-shrink: 0; font-size: var(--testo-numero-grosso); color: var(--colore-accento); line-height: 1; }
.metodo { background: var(--colore-lastra); color: var(--fondo-pagina); }
.metodo .etichetta { color: var(--colore-azione); }
.metodo .sezione-testa { margin-bottom: var(--ritmo); }
.passi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ritmo); }
.passi li { border-top: 1px solid var(--fondo-separatore); padding-top: var(--spazio-fra-sezioni); }
.passi span { color: var(--colore-azione); font-size: var(--testo-numero); }
.passi h3 { font-size: var(--testo-sezione); margin-block: var(--spazio-fra-sezioni) var(--spazio-pagina); }
.passi p { color: var(--fondo-pagina); font-size: var(--testo-corpo); }
.pt-griglia { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: calc(var(--ritmo) * 2); }
.pt h2 { margin-block: var(--spazio-pagina) var(--spazio-fra-sezioni); }
.pt p { margin-bottom: var(--spazio-fra-sezioni); font-size: var(--testo-corpo); }
.pt-tavola { background: var(--fondo-superficie); border: 1px solid var(--fondo-separatore); border-radius: var(--raggio-carta); padding: var(--ritmo); }
.pt-tavola img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.pt-tavola figcaption { border-top: 1px solid var(--fondo-separatore); padding-top: var(--spazio-pagina); display: flex; justify-content: space-between; gap: var(--spazio-pagina); font-size: var(--testo-secondario); font-weight: var(--peso-forte); }
.invito { background: var(--colore-azione); padding-block: calc(var(--ritmo) * 2); }
.invito-interno { display: flex; align-items: center; justify-content: space-between; gap: var(--ritmo); }
.invito h2 { max-width: var(--misura-colonna-di-lettura); margin-top: var(--spazio-fra-carte); }
.avvertenza { padding-block: var(--ritmo); border-bottom: 1px solid var(--fondo-separatore); }
.avvertenza-interno { display: grid; grid-template-columns: 1fr 3fr; gap: var(--ritmo); }
.avvertenza h3 { font-size: var(--testo-titolo); }
.avvertenza p { font-size: var(--testo-secondario); }
.avvertenza p + p { margin-top: var(--spazio-fra-carte); }
footer { background: var(--colore-lastra); color: var(--fondo-pagina); padding-block: var(--ritmo); }
.footer-alto, .footer-basso { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-fra-sezioni); flex-wrap: wrap; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--spazio-pagina) var(--spazio-fra-sezioni); font-size: var(--testo-corpo); }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
.footer-basso { margin-top: var(--ritmo); padding-top: var(--spazio-fra-sezioni); border-top: 1px solid var(--fondo-separatore); font-size: var(--testo-secondario); }
.footer-basso p { color: var(--fondo-pagina); }
.js-statistiche-preferenze, .js-statistiche-pannello { font-family: Syne, system-ui, sans-serif; }
.pagina h1 { font-size: clamp(var(--testo-numero), 4vw, var(--testo-numero-grosso)); overflow-wrap: anywhere; }
.briciole { font-size: var(--testo-secondario); margin-bottom: var(--spazio-fra-sezioni); }
.approfondisci { margin-block: var(--spazio-fra-sezioni); font-weight: var(--peso-forte); }
.lettura { max-width: var(--misura-due-colonne); }
.domande { margin-top: var(--spazio-largo); }
.domande details { border-top: var(--misura-tratto-griglia) solid var(--fondo-separatore); padding-block: var(--spazio-fra-sezioni); }
.domande summary { cursor: pointer; font-size: var(--testo-titolo); font-weight: var(--peso-medio); }
.domande p { margin-top: var(--spazio-pagina); font-size: var(--testo-corpo); }
.installazione { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spazio-fra-sezioni); }
.installazione li { padding: var(--spazio-largo); border: var(--misura-tratto-griglia) solid var(--fondo-separatore); background: var(--fondo-superficie); border-radius: var(--raggio-carta); }
.installazione p { margin-top: var(--spazio-pagina); font-size: var(--testo-corpo); }
.pagina .tavola img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .navigazione { display: none; }
  .hero-griglia { grid-template-columns: 1.1fr 1fr; gap: var(--spazio-pagina); }
  h1 { font-size: clamp(var(--testo-numero), 6.5vw, var(--testo-numero-grosso)); }
  .sezione-testa { align-items: flex-start; }
  .pt-griglia { gap: var(--ritmo); }
}
@media (max-width: 640px) {
  .pagina h1 { font-size: clamp(var(--testo-sezione), 7vw, var(--testo-numero)); }
  .installazione li { padding: var(--spazio-fra-sezioni); }
  .contenitore { width: calc(100% - var(--spazio-pagina) * 2); }
  .barra-interno { min-height: calc(var(--spazio-largo) * 2); gap: var(--spazio-fra-carte); }
  .barra .marchio img { width: clamp(calc(var(--misura-marchio) * .65), 39vw, calc(var(--misura-marchio) * .8)); }
  .barra .bottone { padding-inline: var(--spazio-fra-carte); font-size: var(--testo-secondario); gap: var(--spazio-fra-blocchi); white-space: nowrap; }
  .barra .freccia { font-size: var(--testo-titolo); }
  .apertura { padding-block: var(--ritmo) var(--spazio-pagina); }
  .hero-griglia { grid-template-columns: 1fr; }
  h1 { font-size: clamp(calc(var(--testo-numero) * .8), 10vw, var(--testo-numero-grosso)); }
  .intro { font-size: var(--testo-corpo); }
  .hero-testo .etichetta { margin-bottom: var(--spazio-fra-sezioni); }
  .tavola { padding-bottom: 0; }
  .indice-interno { display: flex; justify-content: flex-start; gap: var(--spazio-fra-carte) var(--spazio-fra-sezioni); font-weight: var(--peso-medio); letter-spacing: .05em; }
  .sezione { padding-block: calc(var(--ritmo) * 2); }
  .sezione-testa { display: block; margin-bottom: var(--ritmo); }
  .sezione-testa > p { margin-top: var(--spazio-fra-sezioni); max-width: 100%; }
  h2 { font-size: clamp(var(--testo-sezione), 8vw, var(--testo-numero)); }
  .funzioni, .pt-griglia, .passi, .avvertenza-interno { grid-template-columns: 1fr; }
  .funzione { padding: var(--spazio-fra-sezioni); }
  .funzione.grande { grid-row: auto; }
  .progressi { flex-direction: column; gap: var(--spazio-pagina); }
  .progressi-segno { display: none; }
  .passi { gap: var(--ritmo); }
  .passi h3 { margin-top: var(--spazio-pagina); }
  .invito-interno { align-items: flex-start; flex-direction: column; }
  .avvertenza-interno { gap: var(--spazio-pagina); }
  .footer-alto { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bottone { transition: none; }
  .bottone:hover { transform: none; }
}