/* Colori e misure: tema chiaro, scuro dal sistema o scelto con il pulsante. */
:root {
  --sfondo: #F6F4EF;
  --superficie: #FFFFFF;
  --superficie-2: #EFECE5;
  --inchiostro: #14171C;
  --tenue: #5B6270;
  --linea: #E2DED5;
  --accento: #1D3F7A;
  --accento-tenue: #E4EAF4;
  --vivo: #2F9E6B;
  --ombra: 0 1px 2px rgb(20 23 28 / 4%), 0 8px 24px -12px rgb(20 23 28 / 18%);
  --telefono-bordo: #1B1E24;
  --raggio: 18px;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #0E1116;
    --superficie: #161A21;
    --superficie-2: #1C212A;
    --inchiostro: #ECEEF2;
    --tenue: #9AA3B2;
    --linea: #262C36;
    --accento: #9DB8EC;
    --accento-tenue: #1B2741;
    --vivo: #5CC795;
    --ombra: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 28px -14px rgb(0 0 0 / 70%);
    --telefono-bordo: #2A2F38;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sfondo: #0E1116;
  --superficie: #161A21;
  --superficie-2: #1C212A;
  --inchiostro: #ECEEF2;
  --tenue: #9AA3B2;
  --linea: #262C36;
  --accento: #9DB8EC;
  --accento-tenue: #1B2741;
  --vivo: #5CC795;
  --ombra: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 28px -14px rgb(0 0 0 / 70%);
  --telefono-bordo: #2A2F38;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.contenitore { width: min(1120px, 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .contenitore { width: min(1120px, 100% - 64px); } }

.salta { position: absolute; left: 16px; top: -48px; background: var(--accento); color: var(--superficie); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.salta:focus { top: 12px; }

/* Barra in alto */
.barra {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--sfondo) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.barra-interna { width: min(1120px, 100% - 32px); margin-inline: auto; height: 64px; display: flex; align-items: center; gap: 24px; }
@media (min-width: 720px) { .barra-interna { width: min(1120px, 100% - 64px); } }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; }
.monogramma {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--accento); color: var(--sfondo); font: 500 13px/1 var(--mono); letter-spacing: 0.02em;
}
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--tenue); font-size: 14.5px; padding: 6px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.menu a:hover { color: var(--inchiostro); }
.menu a[aria-current] { color: var(--inchiostro); background: var(--superficie-2); }
.comandi { display: flex; gap: 6px; }
.pulsante-icona {
  appearance: none; border: 1px solid var(--linea); background: var(--superficie); color: var(--inchiostro);
  height: 34px; min-width: 34px; padding: 0 8px; border-radius: 10px; cursor: pointer;
  font: 500 12.5px/1 var(--mono); display: grid; place-items: center; transition: border-color .2s;
}
.pulsante-icona:hover { border-color: var(--tenue); }
@media (max-width: 760px) {
  html { scroll-padding-top: 116px; }
  .barra-interna { flex-wrap: wrap; height: auto; padding-top: 12px; row-gap: 8px; }
  .comandi { margin-left: auto; }
  .menu { order: 3; width: calc(100% + 24px); margin: 0 -12px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; }
}
@media (max-width: 380px) { .marchio-nome { display: none; } }

/* Hero */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 72px 0 40px; }
.ruolo { font: 500 13px/1 var(--mono); color: var(--tenue); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.ruolo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivo) 20%, transparent); }
.hero h1 { font: 400 clamp(40px, 5.6vw, 68px)/1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--accento); }
.hero-sotto { margin-top: 22px; font-size: 18px; color: var(--tenue); max-width: 54ch; text-wrap: pretty; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; align-items: center; }
.pulsante {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px;
  text-decoration: none; font-weight: 500; font-size: 15px; border: 1px solid var(--linea); background: var(--superficie);
  transition: transform .15s, border-color .2s, background .2s;
}
.pulsante:hover { border-color: var(--tenue); }
.pulsante:active { transform: scale(.98); }
.pulsante.primario { background: var(--inchiostro); color: var(--sfondo); border-color: var(--inchiostro); }
.pulsante.primario:hover { background: var(--accento); border-color: var(--accento); }
.pulsante.solo-icona { width: 44px; padding: 0; justify-content: center; }

.hero-telefoni { position: relative; height: 520px; }
.telefono {
  margin: 0; aspect-ratio: 600 / 1304; border-radius: 30px; padding: 5px; background: var(--telefono-bordo);
  box-shadow: var(--ombra), 0 30px 60px -30px rgb(20 23 28 / 35%);
}
.telefono img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }
.hero-telefoni .telefono { position: absolute; width: 210px; top: 50%; left: 50%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hero-telefoni .h0 { transform: translate(-125%, -46%) rotate(-7deg); }
.hero-telefoni .h1 { transform: translate(25%, -46%) rotate(7deg); }
.hero-telefoni .h2 { transform: translate(-50%, -52%); z-index: 1; width: 230px; }
.hero-telefoni:hover .h0 { transform: translate(-138%, -46%) rotate(-9deg); }
.hero-telefoni:hover .h1 { transform: translate(38%, -46%) rotate(9deg); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; gap: 24px; }
  .hero-telefoni { height: 400px; }
  .hero-telefoni .telefono { width: 160px; }
  .hero-telefoni .h2 { width: 176px; }
}
@media (max-width: 420px) {
  .hero-telefoni { height: 340px; }
  .hero-telefoni .telefono { width: 128px; border-radius: 22px; padding: 4px; }
  .hero-telefoni .telefono img { border-radius: 18px; }
  .hero-telefoni .h2 { width: 144px; }
}

/* Numeri */
.numeri { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-top: 24px; }
.numeri > div { padding: 26px 20px 26px 0; display: grid; gap: 6px; align-content: start; }
.numeri > div + div { padding-left: 20px; border-left: 1px solid var(--linea); }
.numeri strong { font: 400 44px/1 var(--serif); color: var(--accento); }
.numeri span { font-size: 14px; color: var(--tenue); line-height: 1.45; }
@media (max-width: 760px) {
  .numeri { grid-template-columns: 1fr 1fr; }
  .numeri > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .numeri > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* Sezioni */
.sezione { padding-top: 96px; }
.testata { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.testata h2, .contatti h2 { font: 400 clamp(34px, 4.4vw, 48px)/1.05 var(--serif); letter-spacing: -0.015em; }
.testata p { color: var(--tenue); max-width: 46ch; }
.sottotitolo { font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); margin: 0 0 14px; }

.occhiello { font: 500 12.5px/1.3 var(--mono); color: var(--tenue); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 10px; }
.icona-app { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px var(--linea); }
.stato { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tenue); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); }
.stato-spento .punto { background: var(--tenue); }
.chip { display: flex; flex-wrap: wrap; gap: 6px; }
.chip li { font: 400 12.5px/1 var(--mono); padding: 7px 10px; border-radius: 8px; background: var(--superficie-2); color: var(--inchiostro); }
.vai { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14.5px; color: var(--accento); margin-top: auto; }
.vai svg { transition: transform .2s; }

/* Schede */
.scheda {
  display: grid; text-decoration: none; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--raggio); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s;
}
.scheda:hover { border-color: color-mix(in srgb, var(--accento) 45%, var(--linea)); box-shadow: var(--ombra); }
.scheda:hover .vai svg { transform: translateX(3px); }
.scheda h3 { font: 400 34px/1.05 var(--serif); letter-spacing: -0.01em; }
.scheda-testo { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.scheda-testo > p:not(.occhiello):not(.stato) { color: var(--tenue); text-wrap: pretty; }

.scheda-app { grid-template-columns: 1fr 1fr; min-height: 340px; }
.scheda-telefoni { position: relative; background: linear-gradient(160deg, var(--accento-tenue), var(--superficie-2)); overflow: hidden; }
.scheda-app .scheda-telefoni .telefono { position: absolute; width: 168px; left: 50%; top: 34px; transform: translateX(-50%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.scheda-app:hover .scheda-telefoni .t0 { transform: translateX(-50%) translateY(-8px); }

.scheda-grande { grid-template-columns: 1fr 1.25fr; min-height: 460px; }
.scheda-grande .scheda-testo { padding: 40px; justify-content: center; }
.scheda-grande h3 { font-size: clamp(40px, 5vw, 56px); }
.scheda-grande .scheda-telefoni .telefono { width: 190px; top: 48px; }
.scheda-grande .scheda-telefoni .t0 { transform: translateX(-50%); z-index: 1; }
.scheda-grande .scheda-telefoni .t1 { transform: translateX(-150%) translateY(40px) rotate(-4deg); }
.scheda-grande .scheda-telefoni .t2 { transform: translateX(50%) translateY(40px) rotate(4deg); }
.scheda-grande:hover .scheda-telefoni .t0 { transform: translateX(-50%) translateY(-10px); }
.scheda-grande:hover .scheda-telefoni .t1 { transform: translateX(-158%) translateY(30px) rotate(-6deg); }
.scheda-grande:hover .scheda-telefoni .t2 { transform: translateX(58%) translateY(30px) rotate(6deg); }

.griglia-app { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.griglia-app .scheda-app { grid-template-columns: 1fr; grid-template-rows: auto 300px; }
.griglia-app .scheda-telefoni { order: 2; }
.griglia-app .scheda-telefoni .telefono { width: 200px; top: 28px; }

.griglia-dati { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.scheda-dati { grid-template-rows: auto 1fr; }
.scheda-dati .scheda-testo { height: 100%; }
.figura { background: #FFFFFF; border-bottom: 1px solid var(--linea); aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; padding: 16px; }
.figura img { max-height: 100%; width: auto; object-fit: contain; transition: transform .5s; }
.scheda-dati:hover .figura img { transform: scale(1.03); }

@media (max-width: 900px) {
  .scheda-grande, .scheda-app { grid-template-columns: 1fr; }
  .scheda-grande { grid-template-rows: auto 380px; }
  .scheda-grande .scheda-testo { padding: 28px; }
  .scheda-grande .scheda-telefoni .telefono { width: 150px; top: 36px; }
  .griglia-app, .griglia-dati { grid-template-columns: 1fr; }
  .scheda-app:not(.scheda-grande) { grid-template-rows: auto 300px; }
}
@media (max-width: 420px) {
  .scheda-testo, .scheda-grande .scheda-testo { padding: 22px; }
  .scheda-grande { grid-template-rows: auto 320px; }
  .scheda-grande .scheda-telefoni .telefono { width: 122px; }
  .scheda h3 { font-size: 30px; }
}

/* Esperienza */
.cronologia { border-top: 1px solid var(--linea); }
.cronologia li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--linea); }
.quando { font: 400 13px/1.5 var(--mono); color: var(--tenue); padding-top: 4px; }
.cronologia h3 { font-size: 20px; }
.dove { color: var(--tenue); font-size: 15px; margin: 2px 0 10px; }
.cronologia p:last-child { max-width: 68ch; }
.cronologia a { color: var(--accento); text-underline-offset: 3px; }
@media (max-width: 640px) { .cronologia li { grid-template-columns: 1fr; gap: 6px; } }

/* Competenze */
.griglia-competenze { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.competenza { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 22px; display: grid; gap: 14px; align-content: start; }
.competenza h3 { font-size: 16px; font-weight: 600; }
.griglia-formazione { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; margin-top: 56px; }
.griglia-formazione .sottotitolo:not(:first-child) { margin-top: 32px; }
.titolo-studio { padding: 18px 0; border-top: 1px solid var(--linea); }
.titolo-studio h4 { font-size: 18px; margin-top: 4px; }
.titolo-studio .dove { margin-bottom: 0; }
.lingue li { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--linea); }
.lingue li span:last-child { font-family: var(--mono); font-size: 13.5px; color: var(--tenue); }
@media (max-width: 760px) { .griglia-formazione { grid-template-columns: 1fr; gap: 24px; } }

/* Contatti */
.contatti { text-align: center; padding-bottom: 96px; display: grid; justify-items: center; gap: 18px; }
.contatti > p { color: var(--tenue); max-width: 56ch; text-wrap: pretty; }
.email {
  font: 400 clamp(26px, 5.4vw, 56px)/1.1 var(--serif); color: var(--accento); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s;
  overflow-wrap: anywhere;
}
.email:hover { background-size: 100% 1px; }
.contatti-app { color: var(--tenue); font-size: 15px; }
.contatti-app a { color: var(--inchiostro); text-underline-offset: 3px; }
.contatti-github a { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); text-decoration: none; }
.contatti-github a:hover { color: var(--inchiostro); }

/* Pagina di un progetto */
.dettaglio { padding: 40px 0 96px; }
.indietro { display: inline-block; text-decoration: none; color: var(--tenue); font-size: 14.5px; margin-bottom: 36px; }
.indietro:hover { color: var(--inchiostro); }
.dettaglio-testata { max-width: 760px; }
.icona-grande { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 0 0 1px var(--linea), var(--ombra); margin-bottom: 22px; }
.dettaglio-testata h1 { font: 400 clamp(48px, 7vw, 80px)/1 var(--serif); letter-spacing: -0.02em; margin-top: 14px; }
.dettaglio-corpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; margin: 64px 0; }
.punti { counter-reset: n; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.punti li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-bottom: 1px solid var(--linea); text-wrap: pretty; }
.punti li::before { content: counter(n, decimal-leading-zero); font: 400 13px/1.9 var(--mono); color: var(--accento); }
.nota { font-size: 13.5px; color: var(--tenue); margin-top: 22px; }
.galleria { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 28px; margin: 0 -4px 48px; scrollbar-width: thin; }
.galleria .telefono { scroll-snap-align: start; }
.galleria[hidden] { display: none; }
.galleria-testata { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.galleria-testata .sottotitolo { margin: 0; }
.piattaforme { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); }
.piattaforme button {
  font: 500 13px/1 var(--mono); color: var(--tenue); background: none; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.piattaforme button:hover { color: var(--inchiostro); }
.piattaforme button[aria-pressed="true"] { background: var(--accento); color: var(--superficie); }
.figura-grande { aspect-ratio: auto; border: 1px solid var(--linea); border-radius: var(--raggio); margin-bottom: 48px; padding: 24px; }
.figura-grande img { max-height: 560px; }
.griglia-altri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.altro {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  text-decoration: none; padding: 18px 20px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea);
  transition: border-color .2s;
}
.altro:hover { border-color: color-mix(in srgb, var(--accento) 45%, var(--linea)); }
.altro strong { font-weight: 500; }
.altro span { grid-row: 2; color: var(--tenue); font-size: 14px; }
.altro svg { grid-row: 1 / 3; grid-column: 2; color: var(--accento); }
@media (max-width: 760px) {
  .dettaglio-corpo { grid-template-columns: 1fr; gap: 36px; margin: 48px 0; }
  .griglia-altri { grid-template-columns: 1fr; }
  .galleria { grid-auto-columns: 180px; }
}

/* Demo di Milano Housing */
.demo { margin: 0 0 64px; padding: 32px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.demo-stato { color: var(--tenue); padding: 40px 0; text-align: center; }
.demo-testata { max-width: 640px; margin-bottom: 24px; display: grid; gap: 10px; }
.demo-testata h2 { font: 400 clamp(34px, 4.4vw, 48px)/1.05 var(--serif); letter-spacing: -0.015em; }
.demo-testata p:last-child { color: var(--tenue); }
.demo-griglia { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "mappa modulo" "mappa risultato" "cambi cambi"; gap: 20px 28px; }
.demo-mappa-box { grid-area: mappa; display: grid; gap: 10px; align-content: start; }
.demo-mappa { height: 460px; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: var(--superficie-2); z-index: 0; }
.demo-aiuto { font-size: 13.5px; color: var(--tenue); }
.demo-pin span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accento); border: 3px solid var(--superficie); box-shadow: 0 4px 10px rgb(0 0 0 / 35%); }
.demo-calore { image-rendering: auto; mix-blend-mode: multiply; }
:root[data-theme="dark"] .demo-calore { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-calore { mix-blend-mode: screen; } }
.demo-legenda { display: grid; gap: 6px; }
.demo-legenda[hidden] { display: none; }
.demo-mappa-scura .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.demo-legenda-barra { height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgb(49 54 149), rgb(69 117 180), rgb(116 173 209), rgb(254 224 144), rgb(244 109 67), rgb(165 0 38)); }
.demo-legenda-testo { display: flex; justify-content: space-between; gap: 8px; font: 400 12.5px/1.3 var(--mono); color: var(--tenue); }
.demo-legenda-testo span:nth-child(2) { text-align: center; }
.demo-interruttore, .demo-spunte label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.demo-modulo { grid-area: modulo; display: grid; gap: 16px; align-content: start; }
.demo-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.demo-campi label { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 13px; color: var(--tenue); align-items: center; }
.demo-campi label > select, .demo-campi label > input { grid-column: 1 / -1; }
.demo-largo { grid-column: 1 / -1; }
.demo-valore { font: 500 13px/1 var(--mono); color: var(--inchiostro); }
.demo-campi select { appearance: none; font: 400 15px/1.2 var(--sans); color: var(--inchiostro); background: var(--superficie-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235B6270' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--linea); border-radius: 10px; padding: 9px 30px 9px 12px; }
.demo-campi input[type=range] { width: 100%; accent-color: var(--accento); }
.demo-spunte { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.demo-spunte input, .demo-interruttore input { accent-color: var(--accento); width: 17px; height: 17px; }
.demo-risultato { grid-area: risultato; display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 14px; background: var(--accento-tenue); }
.demo-prezzo { font: 400 clamp(40px, 5vw, 56px)/1 var(--serif); letter-spacing: -0.02em; margin-top: 4px; }
.demo-mq { font: 500 15px/1.4 var(--mono); color: var(--accento); }
.demo-nota { font-size: 13px; color: var(--tenue); text-wrap: pretty; }
.demo-fuori { color: var(--tenue); }
.demo-luogo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--accento) 25%, transparent); }
.demo-luogo dt { font: 500 11.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); }
.demo-luogo dd { margin: 3px 0 0; font-weight: 500; display: grid; }
.demo-luogo dd span { font-weight: 400; font-size: 12.5px; color: var(--tenue); }
.demo-cambi { grid-area: cambi; border-top: 1px solid var(--linea); padding-top: 20px; }
.demo-cambi .demo-nota { margin: -6px 0 12px; }
.demo-cambi ul { display: grid; gap: 2px; }
.demo-cambi li { display: grid; grid-template-columns: minmax(150px, 1.1fr) 2fr auto; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; }
.demo-barra { height: 8px; border-radius: 99px; background: var(--superficie-2); position: relative; overflow: hidden; }
.demo-barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--l); border-radius: inherit; }
.demo-barra.su::after { background: var(--vivo); }
.demo-barra.giu::after { background: #D9534F; }
.demo-cambi strong { font: 500 14px/1.2 var(--mono); text-align: right; white-space: nowrap; }
.demo-cambi strong small { font-weight: 400; color: var(--tenue); }
.demo-cambi strong.su { color: var(--vivo); }
.demo-cambi strong.giu { color: #D9534F; }
.demo-piede { margin-top: 18px; }
.leaflet-container { font: 400 12px/1.4 var(--sans); }
@media (max-width: 900px) {
  .demo { padding: 20px; }
  .demo-griglia { grid-template-columns: 1fr; grid-template-areas: "mappa" "risultato" "modulo" "cambi"; }
  .demo-mappa { height: 340px; }
}
@media (max-width: 480px) {
  .demo { margin-inline: -16px; border-radius: 0; border-inline: 0; padding: 20px 16px; }
  .demo-cambi li { grid-template-columns: 1fr auto; }
  .demo-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* Piede */
.piede { border-top: 1px solid var(--linea); }
.piede-interno { width: min(1120px, 100% - 32px); margin-inline: auto; padding: 24px 0 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--tenue); font-size: 14px; }
.piede-link { display: flex; gap: 20px; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--inchiostro); }
.noscript { padding: 48px 16px; text-align: center; }

/* Comparsa */
.compare { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.compare.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .compare { opacity: 1; transform: none; }
}

/* Pagina 404 */
.non-trovata { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: 6px; }
.non-trovata h1 { font: 400 clamp(44px, 7vw, 76px)/1.04 var(--serif); letter-spacing: -0.02em; }
.non-trovata .hero-sotto { margin-top: 8px; }