/* Archibald Mobile. Carattere: esatto, curioso, caldo. Le superfici restano calme, il colore sta nel telefono. */

@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --notte: #0A1022;
  --notte-2: #111830;
  --indaco: #293B8F;
  --ciano: #65D8F2;
  --corallo: #FF856D;
  --nebbia: #EEF2F8;
  --bianco: #FFFFFF;
  --testo: #121829;
  --testo-2: #434D62;
  --testo-3: #586277;
  --su-scuro: #EEF2F8;
  --su-scuro-2: #AEB7CB;
  --filo: rgb(18 24 41 / 12%);
  --filo-scuro: rgb(238 242 248 / 14%);
  --bordo: 24px;
  --largo: 1200px;
  --curva: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--nebbia); color: var(--testo);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 500; font-stretch: 92%; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -.03em; }
h2 { font-size: clamp(30px, 3.8vw, 48px); letter-spacing: -.02em; }
h3 { font-size: 28px; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--indaco); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--indaco); outline-offset: 3px; border-radius: 4px; }
.compositore :focus-visible, .macro :focus-visible, .piede :focus-visible, .testata--scura :focus-visible { outline-color: var(--ciano); }
[hidden] { display: none !important; }

.contenitore { width: 100%; max-width: calc(var(--largo) + var(--bordo) * 2); margin-inline: auto; padding-inline: var(--bordo); }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icona { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.salta { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 8px 16px; border-radius: 8px; background: var(--bianco); color: var(--testo); }
.salta:focus { top: 8px; }
.avviso-demo { position: relative; z-index: 31; padding: 8px var(--bordo); background: var(--notte); color: var(--su-scuro-2); font-size: 13px; line-height: 20px; text-align: center; }
.avviso-demo a { color: var(--su-scuro); }

/* ---------- testata */
.testata { position: sticky; top: 0; z-index: 30; background: rgb(238 242 248 / 90%); backdrop-filter: blur(12px); border-bottom: 1px solid var(--filo); transition: background-color .2s, color .2s, border-color .2s; }
.testata--scura { background: rgb(10 16 34 / 72%); color: var(--su-scuro); border-color: var(--filo-scuro); }
.testata__riga { display: flex; align-items: center; gap: 32px; height: 64px; }
.marchio { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.marchio__segno { width: 24px; height: 24px; }
.navigazione { display: flex; gap: 24px; margin-left: auto; }
.navigazione a { position: relative; padding-block: 8px; color: inherit; font-size: 15px; text-decoration: none; opacity: .78; transition: opacity .3s; }
.navigazione a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--curva); }
.navigazione a:hover::after, .navigazione a[aria-current]::after { transform: scaleX(1); }
.navigazione a:hover, .navigazione a[aria-current] { opacity: 1; }
.testata__selezione { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 15px; font-weight: 500; text-decoration: none; }
.conteggio { min-width: 20px; height: 20px; padding-inline: 4px; border-radius: 10px; background: var(--corallo); color: var(--notte); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.testata__menu { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: inherit; font-size: 15px; }

/* ---------- bottoni e link */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px;
  border: 1px solid transparent; border-radius: 10px; background: var(--corallo); color: var(--notte);
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .3s, border-color .3s, transform .3s var(--curva);
}
.bottone:hover { background: #FF9C89; }
.bottone:active { transform: scale(.98); }
.bottone--secondario { background: transparent; border-color: rgb(18 24 41 / 28%); color: var(--testo); }
.bottone--secondario:hover { background: rgb(18 24 41 / 6%); }
.bottone--scuro { background: transparent; border-color: rgb(238 242 248 / 34%); color: var(--su-scuro); }
.bottone--scuro:hover { background: rgb(238 242 248 / 10%); }
.bottone--piccolo { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.collegamento { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--indaco); font-weight: 500; text-decoration: none; }
.collegamento:hover { text-decoration: underline; }
.collegamento .icona { transition: transform .4s var(--curva); }
.collegamento:hover .icona { transform: translateX(4px); }
.collegamento--chiaro { color: var(--su-scuro); }
.collegamento--bottone { padding: 0; border: 0; background: none; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.azioni--sotto { margin-top: 32px; }
.nota { color: var(--testo-3); font-size: 14px; line-height: 20px; }
.stato { min-height: 24px; color: var(--testo); font-size: 15px; font-weight: 500; }

/* ---------- la sequenza: versione statica (movimento ridotto, niente WebGL, niente JavaScript) */
.pagina-home .testata { margin-bottom: -65px; }
.compositore { background: linear-gradient(165deg, var(--notte) 45%, #16205080 100%), var(--notte); color: var(--su-scuro); }
.palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 32px; max-width: calc(var(--largo) + var(--bordo) * 2); margin-inline: auto; padding: 96px var(--bordo) 64px; }
.palco__quadro { grid-column: 2; grid-row: 1; }
.palco__tela, .palco__fine, .avanzamento { display: none; }
.apertura { grid-column: 1; grid-row: 1; }
.apertura__famiglia { color: var(--ciano); font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; margin-bottom: 16px; }
.apertura__testo { max-width: 32rem; margin-block: 20px 28px; color: var(--su-scuro-2); font-size: 19px; line-height: 28px; }
.tappe { grid-column: 1 / -1; display: grid; gap: 32px; margin-top: 32px; }
.tappa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.tappa__testo h2 { font-size: clamp(28px, 3vw, 40px); }
.tappa__testo p:last-child { max-width: 28rem; margin-top: 12px; color: var(--su-scuro-2); }
.tappa__punto { margin-bottom: 12px; color: var(--ciano); font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- la sequenza: versione 3D. Scroll nativo, un riquadro sticky e un'uscita normale */
.ha-3d .compositore { height: 420vh; height: 420svh; }
.ha-3d .palco { position: sticky; top: 0; display: block; max-width: none; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.ha-3d .palco__quadro { position: absolute; inset: 0; }
.ha-3d .palco__poster, .ha-3d .palco__fine {
  display: block; position: absolute; width: 112vh; width: 112svh; height: 112vh; height: 112svh; max-width: none;
  left: calc(64% - 56svh); top: calc(50% - 56svh);
}
.ha-3d .palco__fine { visibility: hidden; left: calc(68% - 64svh); top: calc(50% - 64svh); width: 128svh; height: 128svh; }
.ha-3d .palco__poster { transition: opacity 1.2s var(--curva); }
.ha-3d .palco__tela { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--curva); }
.palco--vivo .palco__tela { opacity: 1; }
.palco--vivo .palco__poster { opacity: 0; }
.ha-3d .apertura, .ha-3d .tappe { position: absolute; inset: 0; width: 100%; max-width: calc(var(--largo) + var(--bordo) * 2); margin: 0 auto; padding: 64px var(--bordo) 88px; pointer-events: none; }
.ha-3d .apertura { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ha-3d .apertura > * { max-width: 27rem; }
.ha-3d .apertura h1 { max-width: 6.2em; }
.ha-3d .apertura .azioni { pointer-events: auto; }
.ha-3d .tappe { display: grid; align-items: center; gap: 0; }
.ha-3d .tappa { display: block; grid-area: 1 / 1; max-width: 25rem; visibility: hidden; opacity: 0; }
.ha-3d .tappa__foto { display: none; }
.ha-3d .avanzamento { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; align-items: center; gap: 12px; max-width: calc(var(--largo) + var(--bordo) * 2); margin-inline: auto; padding-inline: var(--bordo); color: var(--su-scuro-2); font-size: 14px; }
.avanzamento svg { width: 32px; height: 32px; flex: none; transform: rotate(-90deg); }
.avanzamento circle { fill: none; stroke-width: 3; }
.avanzamento__base { stroke: var(--filo-scuro); }
.avanzamento__giro { stroke: var(--corallo); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.avanzamento__salta { padding-block: 8px; color: var(--su-scuro); white-space: nowrap; }
.passi { display: flex; margin-left: auto; margin-right: 12px; }
.passi a { display: grid; place-items: center; width: 28px; height: 44px; }
.passi span { width: 8px; height: 8px; border-radius: 50%; background: rgb(238 242 248 / 34%); transition: background-color .5s, transform .5s var(--curva); }
.passi a:hover span { background: var(--su-scuro); }
.passi a[aria-current] span { background: var(--corallo); transform: scale(1.5); }

/* ---------- sezioni */
.sezione { padding-block: 128px; }
.sezione--stretta { padding-block: 48px 96px; }
.sezione--bianca { background: var(--bianco); }
.testa-sezione { max-width: 44rem; margin-bottom: 64px; }
.testa-sezione p { margin-top: 12px; color: var(--testo-2); font-size: 19px; line-height: 28px; }
.apertura-pagina { padding-block: 48px 32px; }
.apertura-pagina h1 { font-size: clamp(40px, 5vw, 64px); }
.apertura-pagina p { max-width: 40rem; margin-top: 16px; color: var(--testo-2); font-size: 19px; line-height: 28px; }
.briciole { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; color: var(--testo-3); font-size: 14px; }
.briciole a { color: var(--testo-2); }
.briciole a::after { content: "/"; margin-left: 8px; color: var(--testo-3); display: inline-block; }

/* famiglia */
.famiglia__foto { width: 100%; max-width: 980px; margin: -16px auto 0; }
.famiglia__scelta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--filo); }
.modello { padding: 32px 32px 0 0; }
.modello + .modello { padding-left: 32px; border-left: 1px solid var(--filo); }
.modello h3 a { color: inherit; text-decoration: none; }
.modello h3 a:hover { text-decoration: underline; }
.modello__gancio { margin-top: 8px; color: var(--testo-2); }
.modello__punti { margin-block: 20px; }
.modello__punti li { padding-block: 8px; border-top: 1px solid var(--filo); font-size: 16px; }
.prezzo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.prezzo__cifra { font-family: "Geist Mono", ui-monospace, monospace; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prezzo__nota { color: var(--testo-3); font-size: 14px; }

/* macro */
.macro { position: relative; display: grid; align-items: center; min-height: min(56vw, 80vh); background: var(--notte); color: var(--su-scuro); overflow: hidden; }
.macro__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.macro__testo { position: relative; display: flex; flex-direction: column; align-items: flex-end; padding-block: 64px; }
.macro__testo > * { width: min(100%, 26rem); }
.macro__testo p { margin-top: 16px; color: var(--su-scuro-2); }
.macro__testo .collegamento { margin-top: 12px; }

/* finiture */
.colori__griglia, .prodotto__griglia { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.colori__vista { position: relative; aspect-ratio: 1; }
.colori__foto { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.97); transition: opacity .8s var(--curva), transform 1.1s var(--curva); }
[data-colori]:has(input[value="orbital-ink"]:checked) .colori__foto--orbital-ink,
[data-colori]:has(input[value="mist-silver"]:checked) .colori__foto--mist-silver,
[data-colori]:has(input[value="tidal-glass"]:checked) .colori__foto--tidal-glass,
[data-colori]:has(input[value="eclipse-graphite"]:checked) .colori__foto--eclipse-graphite,
[data-colori]:has(input[value="aurora-violet"]:checked) .colori__foto--aurora-violet,
[data-colori]:has(input[value="solar-coral"]:checked) .colori__foto--solar-coral { opacity: 1; transform: none; }
.colori__scelta > p { margin-block: 12px 24px; color: var(--testo-2); }
.finiture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.finiture legend { margin-bottom: 12px; font-weight: 600; }
.finitura { position: relative; display: grid; justify-items: start; gap: 8px; cursor: pointer; }
.finitura input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.finitura__anello { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 4px var(--c2), 0 0 0 3px var(--nebbia), 0 0 0 4px var(--filo); transition: box-shadow .4s var(--curva), transform .4s var(--curva); }
.finitura:hover .finitura__anello { transform: scale(1.06); }
.finitura input:checked + .finitura__anello { box-shadow: inset 0 0 0 4px var(--c2), 0 0 0 3px var(--nebbia), 0 0 0 5px var(--testo); }
.finitura input:focus-visible + .finitura__anello { outline: 2px solid var(--indaco); outline-offset: 7px; }
.finitura__nome { color: var(--testo-2); font-size: 14px; line-height: 20px; }
.finitura input:checked ~ .finitura__nome { color: var(--testo); font-weight: 600; }
.finitura--orbital-ink { --c: #141C31; --c2: #3A4560; }
.finitura--mist-silver { --c: #D7DDE6; --c2: #C4CCD8; }
.finitura--tidal-glass { --c: #2C6372; --c2: #6F9AA6; }
.finitura--eclipse-graphite { --c: #1C1E24; --c2: #454951; }
.finitura--aurora-violet { --c: #4B3F8C; --c2: #9A90C4; }
.finitura--solar-coral { --c: #D2634A; --c2: #E9AE9B; }

/* tabella */
.tabella { overflow-x: auto; }
.tabella table { width: 100%; min-width: 640px; border-collapse: collapse; }
.tabella th, .tabella td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--filo); text-align: left; vertical-align: top; font-size: 16px; font-weight: 400; }
.tabella thead th { font-size: 20px; font-weight: 500; }
.tabella thead a { color: inherit; }
.tabella tbody th { width: 22%; color: var(--testo-3); font-size: 15px; }
.tabella__prezzo td { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; font-variant-numeric: tabular-nums; }

/* racconto e domande */
.racconto__griglia, .domande, .specifiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.racconto__griglia p { color: var(--testo-2); font-size: 19px; line-height: 28px; }
.racconto__griglia .collegamento { margin-top: 12px; }
.domande--sola { grid-template-columns: minmax(0, 48rem); }
.domanda { border-bottom: 1px solid var(--filo); }
.domanda:first-child { border-top: 1px solid var(--filo); }
.domanda summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding-block: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary .icona { transition: transform .5s var(--curva); }
.domanda[open] summary .icona { transform: rotate(45deg); }
.domanda p { padding-bottom: 20px; color: var(--testo-2); }
.domande .collegamento { margin-top: 12px; }

/* scheda prodotto */
.prodotto { padding-block: 16px 64px; }
.prodotto__scelta h1 { font-size: clamp(44px, 5.4vw, 72px); }
.prodotto__gancio { margin-block: 12px 12px; font-size: 22px; font-weight: 500; line-height: 30px; }
.prodotto__scelta > p:not(.prodotto__gancio, .prezzo, .stato, .nota) { margin-bottom: 24px; color: var(--testo-2); }
.lati { display: grid; grid-template-columns: 1fr .5fr 1fr; align-items: end; gap: 32px; max-width: 880px; margin-inline: auto; }
.lati figure { margin: 0; }
.lati figcaption { margin-top: 8px; color: var(--testo-3); font-size: 14px; text-align: center; }
.lati__profilo img { height: auto; width: 200%; max-width: none; margin-left: -50%; }
.specifiche dl { margin: 0; }
.specifiche dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--filo); }
.specifiche dl > div:first-child { border-top: 1px solid var(--filo); }
.specifiche dt { color: var(--testo-3); font-size: 15px; }
.specifiche dd { margin: 0; }
.specifiche > div > p { margin-top: 12px; color: var(--testo-2); }
.invito__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.invito p { margin-top: 8px; color: var(--testo-2); }

.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--bianco); border-top: 1px solid var(--filo); visibility: hidden; transform: translateY(100%); transition: transform .7s var(--curva), visibility 0s .7s; }
.barra--su { visibility: visible; transform: none; transition: transform .7s var(--curva); }
.barra__nav { display: flex; gap: 24px; margin-inline: auto; }
.barra__nav a { padding-block: 8px; color: var(--testo-2); font-size: 14px; text-decoration: none; transition: color .3s; }
.barra__nav a:hover, .barra__nav a[aria-current] { color: var(--testo); box-shadow: 0 1px 0 currentColor; }
.barra__riga { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.barra__nome { line-height: 20px; }
.barra__riga strong { font-weight: 600; }
.barra__nome span { margin-left: 8px; color: var(--testo-3); font-size: 14px; }
.barra__prezzo { font-family: "Geist Mono", ui-monospace, monospace; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra__prezzo span { color: var(--testo-3); font-family: "Instrument Sans", sans-serif; font-size: 13px; }
.con-barra .piede { padding-bottom: 64px; }

/* confronto */
.confronto__foto { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: start; gap: 32px; margin-bottom: 32px; }
.confronto__foto a { display: block; color: var(--testo); font-weight: 500; text-align: center; text-decoration: none; }
.confronto__foto a:hover span { text-decoration: underline; }
.confronto__foto span { display: block; margin-top: 8px; }

/* guida */
.guida { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.guida__modulo { display: grid; gap: 28px; }
.guida__domanda legend { margin-bottom: 12px; font-size: 19px; font-weight: 500; }
.guida__domanda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guida__domanda label { position: relative; display: flex; align-items: center; min-height: 56px; padding: 12px 16px; border: 1px solid var(--filo); border-radius: 10px; background: var(--bianco); cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.guida__domanda label:hover { border-color: rgb(18 24 41 / 34%); }
.guida__domanda input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.guida__domanda label:has(input:checked) { border-color: var(--testo); box-shadow: inset 0 0 0 1px var(--testo); font-weight: 500; }
.guida__domanda label:has(input:focus-visible) { outline: 2px solid var(--indaco); outline-offset: 2px; }
.guida__esito { position: sticky; top: 88px; padding: 24px; border-radius: 16px; background: var(--notte); color: var(--su-scuro); }
.guida__esito p { color: var(--su-scuro-2); }
.guida__esito .bottone { margin-top: 20px; }
.guida__esito :focus-visible { outline-color: var(--ciano); }
.guida__titolo { margin-bottom: 8px; color: var(--su-scuro) !important; font-size: 24px; font-weight: 500; line-height: 30px; }
.testo-lungo { max-width: calc(44rem + var(--bordo) * 2); margin-inline: 0; }
@media (min-width: 1248px) { .testo-lungo { margin-left: calc((100vw - var(--largo)) / 2 - var(--bordo)); } }
.testo-lungo h2 { margin-top: 40px; font-size: 28px; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo p { margin-top: 12px; color: var(--testo-2); }
.testo-lungo .nota { margin-top: 32px; color: var(--testo-3); }

/* storia */
.linea { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-bottom: 32px; }
.linea::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgb(18 24 41 / 22%); transform: scaleX(var(--riga, 1)); transform-origin: left; }
.linea li { position: relative; padding-top: 32px; }
.linea li::before { content: ""; position: absolute; top: -9px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--nebbia); border: 4px solid var(--corallo); }
.linea__anno { margin-bottom: 8px; color: var(--testo-3); font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; font-variant-numeric: tabular-nums; }
.linea h2 { font-size: 24px; letter-spacing: -.01em; }
.linea p:last-child { margin-top: 8px; color: var(--testo-2); font-size: 16px; }

/* selezione */
.selezione { max-width: calc(48rem + var(--bordo) * 2); margin-inline: 0; }
@media (min-width: 1248px) { .selezione { margin-left: calc((100vw - var(--largo)) / 2 - var(--bordo)); } }
.selezione__vuota { margin-bottom: 24px; color: var(--testo-2); font-size: 19px; }
.riga { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 44px; align-items: center; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--filo); }
.riga:first-child { border-top: 1px solid var(--filo); }
.riga__foto { width: 96px; height: 96px; }
.riga__nome { color: var(--testo); font-size: 19px; font-weight: 500; text-decoration: none; }
.riga__nome:hover { text-decoration: underline; }
.riga__finitura { color: var(--testo-3); font-size: 15px; }
.riga__prezzo { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.riga__togli { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--testo-2); }
.riga__togli:hover { background: rgb(18 24 41 / 6%); }
.selezione__totale { display: flex; justify-content: space-between; align-items: baseline; margin-block: 24px 12px; font-size: 19px; }
.selezione__totale strong { font-family: "Geist Mono", ui-monospace, monospace; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* contatti */
.contatti { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.modulo { display: grid; gap: 20px; }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 12px; border: 1px solid rgb(18 24 41 / 34%); border-radius: 10px; background: var(--bianco); }
.modulo .bottone { justify-self: start; }
.contatti__nota h2 { font-size: 24px; }
.contatti__nota p { margin-block: 12px; color: var(--testo-2); }

/* piede */
.piede { background: var(--notte); color: var(--su-scuro); }
.piede__griglia { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 64px 32px; }
.piede__marchio p { max-width: 22rem; margin-top: 12px; color: var(--su-scuro-2); font-size: 15px; }
.piede nav { display: grid; align-content: start; gap: 4px; }
.piede h2 { margin-bottom: 8px; color: var(--su-scuro-2); font-size: 14px; font-stretch: 100%; letter-spacing: 0; font-weight: 400; line-height: 20px; }
.piede nav a { padding-block: 4px; color: var(--su-scuro); font-size: 15px; text-decoration: none; }
.piede nav a:hover { text-decoration: underline; }
.piede__nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 16px 24px; border-top: 1px solid var(--filo-scuro); color: var(--su-scuro-2); font-size: 14px; }
.piede__su { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.piede__su:hover { text-decoration: underline; }
.piede__nota a { color: var(--su-scuro); }

/* 404 */
.errore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; min-height: 80vh; }
.errore p { margin-block: 16px 24px; color: var(--testo-2); }
.errore h1 { font-size: clamp(36px, 4.4vw, 56px); }
.errore img { background: var(--notte); border-radius: 16px; }

/* ---------- schermi medi e telefoni */
@media (max-width: 1040px) {
  .navigazione { gap: 16px; }
  .linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linea::before { display: none; }
  .linea li { border-top: 1px solid var(--filo); }
}

@media (max-width: 860px) {
  :root { --bordo: 16px; }
  body { font-size: 16px; }
  .sezione { padding-block: 80px; }
  .testa-sezione { margin-bottom: 40px; }
  .barra__nav { display: none; }
  .barra__nome { margin-right: auto; }
  .passi { margin-right: 4px; }
  .sezione--stretta { padding-block: 32px 64px; }
  .testata__riga { gap: 16px; }
  .testata__selezione { margin-left: auto; }
  .testata__menu { display: inline-flex; }
  .navigazione { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--bordo) 16px; background: var(--nebbia); color: var(--testo); border-bottom: 1px solid var(--filo); }
  .testata--scura .navigazione { background: var(--notte); color: var(--su-scuro); }
  .navigazione--aperta { display: flex; }
  .navigazione a { min-height: 44px; font-size: 17px; opacity: 1; }
  .navigazione a::after { display: none; }
  .navigazione a[aria-current] { font-weight: 600; }

  .palco { grid-template-columns: minmax(0, 1fr); padding-top: 88px; }
  .palco__quadro, .apertura { grid-column: 1; grid-row: auto; }
  .palco__quadro { order: 2; }
  .tappe { order: 3; }
  .tappa { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .ha-3d .compositore { height: 320vh; height: 320svh; }
  .ha-3d .palco { padding: 0; }
  .ha-3d .palco__poster { width: min(132vw, 74svh); height: min(132vw, 74svh); left: calc(50% - min(66vw, 37svh)); top: calc(66svh - min(66vw, 37svh)); }
  .ha-3d .palco__fine { width: min(176vw, 100svh); height: min(176vw, 100svh); left: calc(50% - min(88vw, 50svh)); top: calc(40svh - min(88vw, 50svh)); }
  .ha-3d .apertura { justify-content: flex-start; padding: 80px var(--bordo) 0; }
  .ha-3d .apertura h1 { font-size: 44px; }
  .apertura__testo { margin-block: 12px 16px; font-size: 17px; line-height: 24px; }
  .apertura__famiglia { margin-bottom: 8px; }
  .ha-3d .apertura .bottone { min-height: 44px; padding: 8px 16px; font-size: 15px; }
  .ha-3d .tappe { align-items: end; padding: 0 var(--bordo) 108px; }
  .ha-3d .tappa { max-width: none; }
  .ha-3d .tappa__testo h2 { font-size: 26px; }
  .ha-3d .tappa__testo p:last-child { margin-top: 8px; font-size: 15px; line-height: 22px; }
  .ha-3d .tappa__punto { margin-bottom: 4px; }
  .ha-3d .avanzamento { bottom: 52px; }
  .ha-3d .avanzamento p { display: none; }

  .famiglia__scelta, .colori__griglia, .prodotto__griglia, .racconto__griglia, .domande, .specifiche, .guida, .contatti, .errore { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .modello { padding: 24px 0; }
  .modello + .modello { padding-left: 0; border-left: 0; border-top: 1px solid var(--filo); }
  .macro { display: block; min-height: 0; }
  .macro__foto { position: static; height: auto; aspect-ratio: 16 / 10; }
  .macro__testo { align-items: flex-start; padding-block: 32px 48px; }
  .guida__esito { position: static; }
  .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 48px; }
  .piede__marchio { grid-column: 1 / -1; }
  .lati { gap: 8px; }
  .riga { grid-template-columns: 64px minmax(0, 1fr) 44px; }
  .riga__foto { width: 64px; height: 64px; }
  .riga__prezzo { grid-column: 2; grid-row: 2; margin-top: -12px; }
  .riga__togli { grid-column: 3; grid-row: 1 / span 2; }
  .barra__prezzo span { display: none; }

  /* il confronto su telefono: niente scorrimento laterale, l'etichetta sta sopra le due colonne */
  .tabella table, .tabella thead, .tabella tbody { display: block; min-width: 0; }
  .tabella tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding-block: 12px; border-bottom: 1px solid var(--filo); }
  .tabella th, .tabella td { padding: 0; border: 0; font-size: 15px; }
  .tabella tbody th { grid-column: 1 / -1; width: auto; font-size: 14px; }
  .tabella thead td { display: none; }
  .tabella thead th { font-size: 17px; }
}

@media (max-width: 600px) {
  .linea { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* avviso dopo "Aggiungi" */
.avviso { position: fixed; left: 24px; bottom: 88px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; max-width: 26rem; padding: 12px 16px; border-radius: 12px; background: var(--notte); color: var(--su-scuro); font-size: 15px; visibility: hidden; opacity: 0; }
.avviso a { color: var(--su-scuro); font-weight: 500; white-space: nowrap; }
.avviso :focus-visible { outline-color: var(--ciano); }

@media (max-width: 860px) {
  .avviso { left: 16px; right: 16px; top: 120px; bottom: auto; max-width: none; }
}

/* progresso della guida */
.guida__passi { display: flex; align-items: center; gap: 12px; color: var(--testo-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.guida__passi svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.guida__passi circle { fill: none; stroke-width: 4; }
.guida__base { stroke: var(--filo); }
.guida__giro { stroke: var(--testo); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .8s var(--curva); }

/* righe dei titoli che salgono: il margine evita di tagliare le lettere con la coda */
.riga-titolo-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* ---------- entrate lente: stanno nel CSS, così partono da sole e non c'è nessun lampo */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease; }
  .testata { view-transition-name: testata; }

  @keyframes sale { from { opacity: 0; transform: translateY(24px); } }
  @keyframes compare { from { opacity: 0; } }
  .apertura > *, .apertura-pagina .contenitore > *, .prodotto__scelta > * { animation: sale 1.2s var(--curva) both; }
  .prodotto .colori__vista, .briciole { animation: compare 1.4s var(--curva) both; }
  .avanzamento { animation: compare 1.4s var(--curva) 1s both; }
  .apertura > :nth-child(2), .apertura-pagina .contenitore > :nth-child(2), .prodotto__scelta > :nth-child(2) { animation-delay: .12s; }
  .apertura > :nth-child(3), .prodotto__scelta > :nth-child(3) { animation-delay: .24s; }
  .apertura > :nth-child(4), .prodotto__scelta > :nth-child(4) { animation-delay: .36s; }
  .prodotto__scelta > :nth-child(5) { animation-delay: .48s; }
  .prodotto__scelta > :nth-child(n+6) { animation-delay: .6s; }

  /* le risposte si aprono invece di comparire di colpo */
  .domanda { interpolate-size: allow-keywords; }
  .domanda::details-content { height: 0; overflow: clip; transition: height .6s var(--curva), content-visibility .6s allow-discrete; }
  .domanda[open]::details-content { height: auto; }
}

/* finestra molto bassa dopo un ridimensionamento: restano titolo e azioni */
@media (max-height: 560px) {
  .ha-3d .apertura { justify-content: flex-start; padding-top: 72px; }
  .ha-3d .apertura h1 { font-size: 36px; margin-bottom: 16px; }
  .ha-3d .apertura__testo, .ha-3d .apertura__famiglia { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}