*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--linea-forte) var(--sfondo-2);
}
@media (min-width: 900px) { [id] { scroll-margin-top: 88px; } }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.6;
}

::selection { background: var(--rosa-premuta); color: var(--nero); }

h1, h2, h3 { margin: 0; color: var(--testo); font-family: var(--font-titoli); }
p { margin: 0; }
a { color: var(--rosso-scuro); text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--rosso-scuro); outline-offset: 3px; }

.vn { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.salta { position: absolute; top: -120px; left: 16px; z-index: 50; padding: 12px 16px; border-radius: var(--raggio-s); background: var(--bianco); color: var(--testo); font-weight: 700; }
.salta:focus { top: 16px; }

.contenitore { width: 100%; max-width: var(--contenitore); margin-inline: auto; padding-inline: var(--gutter); }
.unito { white-space: nowrap; }

.sezione { padding-block: var(--spazio-sezione); }
.sezione--scura { background: var(--mattone); color: var(--bianco); }
.sezione--scura h2 { color: var(--bianco); }
.sezione--scura h3, .sezione--scura .evidenza { color: var(--giallo); }
.sezione--scura .paragrafo, .sezione--scura .nota { color: var(--bianco); }
.sezione--scura .collegamento, .sezione--scura .paragrafo a, .sezione--scura .nota a { color: var(--giallo); }
.sezione--scura :focus-visible { outline-color: var(--bianco); }
.sezione--scura .icona { background: var(--mattone-chiaro); color: var(--bianco); }
.sezione--scura .tondo { border: 1.5px solid var(--bianco); background: transparent; color: var(--bianco); }
.sezione--scura .tondo:hover { background: var(--su-scuro-hover); }
.sezione--scura .tondo:disabled { border-color: var(--spento-su-scuro); background: transparent; color: var(--spento-su-scuro); }
.sezione:not(.sezione--scura) + .sezione:not(.sezione--scura) { padding-top: 0; }
.apertura:has(+ .sezione:not(.sezione--scura)) { padding-bottom: var(--spazio-sezione); }
.apertura + .sezione:not(.sezione--scura) { padding-top: 0; }
@media (min-width: 960px) { .apertura--piena { display: flex; align-items: center; min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); } }
.testa-sezione { max-width: 740px; }   
.titolo-display { font-size: var(--misura-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.titolo-display .accento { color: var(--rosso); }
.sezione h2 { font-size: var(--misura-headline); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.paragrafo { max-width: 60ch; margin-top: 16px; color: var(--testo-2); font-size: 1.125rem; }
.lead { max-width: 36ch; margin-top: 18px; color: var(--testo-2); font-size: var(--misura-lead); line-height: 1.45; }
.lead strong { color: var(--testo); font-weight: 700; }
.nota { margin-top: 16px; color: var(--testo-2); font-size: 0.9375rem; }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 2px solid transparent; border-radius: var(--raggio-pillola);
  font: 600 1.0625rem/1 var(--font-titoli); text-decoration: none; cursor: pointer;
  transition: transform var(--durata-breve) ease, box-shadow var(--durata-breve) ease, background-color var(--durata-breve) ease;
}
.bottone .bi { font-size: 1.15em; }
.bottone--piccolo { min-height: 44px; padding: 0 18px; font-size: var(--misura-label); }
.bottone--iscriviti { background: var(--rosso); color: var(--bianco); }
.bottone--iscriviti:hover { background: var(--rosso-premuto); }
.bottone--azione { background: var(--nero); color: var(--bianco); }
.bottone--contorno { border-color: currentColor; background: var(--bianco); color: var(--rosso-scuro); }
.bottone--contorno:hover { background: var(--rosa); }
.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(1px); }
.bottone:disabled, .bottone[aria-disabled="true"] { border-color: var(--linea-forte); background: var(--sfondo-2); box-shadow: none; color: var(--bordo-campo); cursor: not-allowed; transform: none; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.azioni .bottone { flex: 1 1 auto; }
@media (min-width: 560px) { .azioni .bottone { flex: 0 0 auto; } }

.collegamento { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--rosso-scuro); font: 600 1rem/1 var(--font-titoli); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.icona { display: inline-grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: var(--raggio-icona); background: var(--rosa); color: var(--rosso); font-size: 1.375rem; }
.icona--piccola { width: 40px; height: 40px; border-radius: var(--raggio-s); font-size: 1.125rem; }
.tondo { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--rosa); color: var(--rosso-scuro); font-size: 1.25rem; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
.tondo:hover { background: var(--rosa-premuta); transform: scale(1.06); }
.tondo:disabled { background: var(--sfondo-2); color: var(--bordo-campo); cursor: not-allowed; transform: none; }

.luogo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linea); border-radius: var(--raggio-pillola); background: var(--bianco); box-shadow: var(--ombra-appoggio); color: var(--testo); font: 600 0.875rem/1.2 var(--font-titoli); }
.luogo .bi { color: var(--rosso); }
.metro { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--rosso); color: var(--bianco); font: 700 0.75rem/1 var(--font-titoli); }
.invito .metro, .iscrizione .metro, .sezione--scura .metro { background: var(--nero); }

.scheda { padding: 22px; border-radius: var(--raggio-m); background: var(--bianco); box-shadow: var(--ombra-appoggio); color: var(--testo); }
.scheda--bordo { border: 1px solid var(--linea); box-shadow: none; }
.scheda h3 { font-size: var(--misura-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.scheda p { margin-top: 6px; color: var(--testo-2); }
.griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--spazio-griglia); margin: 44px 0 0; padding: 0; list-style: none; }
.griglia > * { grid-column: 1 / -1; }
@media (min-width: 760px) { .griglia--2 > * { grid-column: span 4; } }
@media (min-width: 1100px) { .griglia--2 > * { grid-column: span 6; } }

.foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--raggio-l); background: var(--sfondo-2); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto img { filter: saturate(0.72) contrast(1.1) sepia(0.12) brightness(1.03); }
.foto--orizzontale { aspect-ratio: 4 / 3; }
.foto--verticale { aspect-ratio: 4 / 5; }
.foto figcaption { position: absolute; bottom: 12px; left: 12px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: var(--raggio-pillola); background: rgba(255, 255, 255, 0.92); color: var(--testo); font: 600 0.8125rem/1.3 var(--font-titoli); }

@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra var(--durata-entrata) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .entra--1 { animation-delay: var(--passo-entrata); }
  .entra--2 { animation-delay: calc(var(--passo-entrata) * 2); }
  .entra--3 { animation-delay: calc(var(--passo-entrata) * 3); }
  .entra--4 { animation-delay: calc(var(--passo-entrata) * 4); }
  .entra--5 { animation-delay: calc(var(--passo-entrata) * 5); }
}
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }

.stelle {
  --pieno: 94%;
  --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  width: 110px; height: 22px;
  background: linear-gradient(90deg, var(--stella) var(--pieno), var(--stella-vuota) 0);
  -webkit-mask: var(--forma) 0 0 / 22px 22px repeat-x;
  mask: var(--forma) 0 0 / 22px 22px repeat-x;
}