/* Composizione della landing statica (sito/, V3-L2). Solo token di marca.css/tokens.css e solo
   componenti di componenti.css (contratto §0 del design system): qui non c'è nessun colore, spazio
   di layout, raggio o durata scritto a mano. Soglie di finestra: 600 / 1024 / 1440 (tokens.css). */

.sito-testata {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--c-sfondo) 88%, transparent);
  -webkit-backdrop-filter: var(--sfocatura-barra);
  backdrop-filter: var(--sfocatura-barra);
  border-bottom: var(--filetto);
}
.sito-testata .ui-testata { max-width: calc(var(--contenuto-max) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); min-height: var(--nav-h); }
.sito-logo { display: inline-flex; color: var(--c-testo); height: var(--icona-l); width: auto; }

/* B4 (critica.md): main e piede non avevano margine laterale né larghezza massima — il contenuto
   toccava il bordo della finestra. Stessa misura della testata (§3 del design system). */
main, .sito-pie .ui-testata, .sito-pie .sito-lingua {
  max-width: calc(var(--contenuto-max) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
  box-sizing: border-box;
}
@media (max-width: 599.98px) {
  .sito-corpo--invito-fisso { padding-bottom: calc(var(--h-comando-grande) + var(--sp-9) + var(--safe-b)); }
}
.sito-nav { display: none; align-items: center; gap: var(--sp-6); }
@media (min-width: 1024px) { .sito-nav { display: flex; } }
.sito-nav a { color: var(--c-testo-2); font: var(--fw-forte) var(--fs-secondario) / 1 var(--f-testo); text-decoration: none; }
.sito-nav a:hover { color: var(--c-testo); }
.sito-testata-azioni { display: flex; align-items: center; gap: var(--sp-3); }

.sito-pie {
  border-top: var(--filetto);
  padding-block: var(--sp-9);
}
.sito-pie nav { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); }
.sito-pie nav a { color: var(--c-testo-2); text-decoration: none; font-size: var(--fs-secondario); }
.sito-pie nav a:hover { color: var(--c-testo); }

/* ---------- Apertura ---------- */
.sito-apertura { display: grid; gap: var(--sp-8); padding-block: var(--sp-10) var(--sp-9); align-items: center; }
@media (min-width: 1024px) { .sito-apertura { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-11); } }
.sito-apertura__testo { display: grid; gap: var(--sp-5); max-width: 36ch; }
.sito-apertura__palco { width: 100%; height: auto; aspect-ratio: 4 / 5; min-height: 320px; }
@media (min-width: 1024px) { .sito-apertura__palco { aspect-ratio: 1 / 1; } }

/* ---------- Sezioni generali ---------- */
.sito-sezione { padding-block: var(--sp-10); }
.sito-sezione__intro { max-width: 52ch; margin-bottom: var(--sp-7); }
.sito-passi { display: grid; gap: var(--sp-5); counter-reset: passo; }
@media (min-width: 600px) { .sito-passi { grid-template-columns: repeat(3, 1fr); } }
.sito-passo { display: grid; gap: var(--sp-2); }
.sito-passo::before { counter-increment: passo; content: counter(passo); display: inline-grid; place-items: center; width: var(--sp-9); height: var(--sp-9); border-radius: var(--r-tondo); background: var(--c-azione-tenue); color: var(--c-su-azione-tenue); font: var(--fw-forte) var(--fs-titolo-3) / 1 var(--f-testo); }

.sito-funzioni { display: grid; gap: var(--sp-5); }
@media (min-width: 600px) { .sito-funzioni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sito-funzioni { grid-template-columns: repeat(3, 1fr); } }
.sito-funzione { padding: var(--sp-6); border-radius: var(--r-l); background: var(--c-superficie); display: grid; gap: var(--sp-2); align-content: start; }
.sito-funzione__icona { width: var(--icona-l); height: var(--icona-l); color: var(--c-azione); }

.sito-giro { display: grid; gap: var(--sp-5); }
@media (min-width: 600px) { .sito-giro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sito-giro { grid-template-columns: repeat(4, 1fr); } }
.sito-schermata { display: grid; gap: var(--sp-2); }
.sito-schermata__figura { aspect-ratio: 9 / 16; border-radius: var(--r-l); background: var(--c-superficie-2); display: grid; place-items: center; overflow: hidden; }
.sito-schermata__figura svg { width: 40%; height: 40%; color: var(--c-testo-3); }
.sito-schermata__nota { font: var(--fw-forte) var(--fs-secondario) / 1.3 var(--f-testo); }

.sito-prezzo { display: grid; gap: var(--sp-5); }
@media (min-width: 600px) { .sito-prezzo { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; } }

/* ---------- Prova una posa: compone ui-palco (DS §7.1), non lo ridisegna ---------- */
.sito-demo { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 1024px) { .sito-demo { grid-template-columns: 1fr 1fr; } }
.sito-demo__palco { position: relative; aspect-ratio: 3 / 4; min-height: 360px; }
.sito-demo__ripiego { position: absolute; inset: 0; display: grid; place-items: center; }
.sito-demo__ripiego svg { width: 56%; height: 56%; color: var(--c-manichino); }
.sito-demo__richiamo { position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: var(--z-palco-comandi); }
.sito-demo__richiamo[hidden] { display: none; }
.sito-demo__barra { position: absolute; left: var(--sp-3); right: var(--sp-3); top: var(--sp-3); height: 3px; border-radius: var(--r-tondo); background: var(--c-velo-palco); overflow: hidden; z-index: var(--z-palco-comandi); }
.sito-demo__barra::after { content: ""; display: block; height: 100%; width: calc(var(--prova-posa-progresso, 0) * 100%); background: var(--c-azione-palco); transition: width var(--m-istante) linear; }
.sito-demo__testo { display: grid; gap: var(--sp-4); }
.sito-demo__didascalia { min-height: calc(var(--fs-titolo-3) * var(--lh-titoli) * 2); }
.sito-demo__errore[hidden] { display: none; }

/* ---------- Domande (dettaglio nativo) ---------- */
.sito-domanda { border-bottom: var(--filetto); padding-block: var(--sp-4); }
.sito-domanda summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tocco-min); font: var(--fw-forte) var(--fs-corpo) / 1.3 var(--f-testo); }
.sito-domanda summary::-webkit-details-marker { display: none; }
.sito-domanda summary::after { content: "+"; flex: none; color: var(--c-testo-2); font-weight: var(--fw-normale); transition: transform var(--m-istante) var(--e-standard); }
.sito-domanda[open] summary::after { content: "–"; }
.sito-domanda p { margin-top: var(--sp-2); }

.sito-hr { border: 0; border-top: var(--filetto); margin-block: var(--sp-7); }

.sito-piani { display: grid; gap: var(--sp-2); margin-block: var(--sp-6); }
.sito-piani li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-secondario); color: var(--c-testo-2); }
.sito-piani li::before { content: "·"; color: var(--c-azione); }

.sito-lingua { font-size: var(--fs-nota); color: var(--c-testo-3); }