/* Base del sito consumer: reset leggero, tipografia, contenitori, movimento. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 var(--t-17)/1.6 var(--f-testo);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-testo); text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(var(--t-32), 5vw, var(--t-56)); line-height: 1.02; font-weight: 800; font-variation-settings: 'wdth' 82; }
h2 { font-size: clamp(var(--t-24), 3.2vw, var(--t-42)); line-height: 1.08; font-weight: 780; font-variation-settings: 'wdth' 86; }
h3 { font-size: var(--t-19); line-height: 1.25; font-weight: 720; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 720; }
a { color: var(--bosco); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--bosco); outline-offset: 3px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--segnale); color: var(--su-segnale); }

.sezione { padding-block: var(--sezione); }
.sezione + .sezione { border-top: 1px solid var(--linea); }
.intestazione { display: grid; gap: 12px; margin-bottom: 32px; max-width: 68ch; }
.intestazione p { color: var(--inchiostro-2); font-size: var(--t-19); }
.testo { max-width: 68ch; display: grid; gap: 16px; }
.testo h2 { margin-top: 24px; }
.secondario { color: var(--inchiostro-2); }
.piccolo { font-size: var(--t-14); }
.cifre, .prezzo { font-variant-numeric: tabular-nums; }

/* Comparsa delle sezioni mentre scorri: solo dove il browser lo sa fare, e
   sempre da uno stato visibile (niente contenuto nascosto in attesa). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes entra { from { transform: translateY(12px); } to { transform: none; } }

/* Passaggio tra pagine del sito (Chrome, Safari 18.2+). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-comparsa); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}