@font-face { font-family: 'Barlow Condensed'; src: url('assets/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('assets/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: Barlow; src: url('assets/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url('assets/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url('assets/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* La pagina segue il tema del dispositivo; il cruscotto resta sempre scuro, come in auto. */
:root {
  --fondo: #efece5;
  --superficie: #fff;
  --inchiostro: #16171b;
  --attenuato: #575a62;
  --linea: rgba(22, 23, 27, .13);
  --accento-testo: #8f5400;
  --ambra: #ffb21a;
  --ambra-scura: #e79c00;
  --rosso: #ff4a3d;
  --giallo: #c6e85a;
  --verde: #3ddc84;
  --plancia: #17181c;
  --plancia-bordo: #2a2c33;
  --plancia-ink: #f2efe8;
  --plancia-attenuato: #8d8a83;
  --spenta: #3a3d44;
  --margine: clamp(20px, 5vw, 80px);
  --larghezza: 1320px;
  --titoli: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101114;
    --superficie: #1a1c21;
    --inchiostro: #f2efe8;
    --attenuato: #aaa79f;
    --linea: rgba(242, 239, 232, .13);
    --accento-testo: #ffb21a;
    --plancia: #1a1c21;
    --plancia-bordo: #2e3138;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: 400 18px/1.6 Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--titoli); font-weight: 800; line-height: .95; letter-spacing: -.005em; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambra); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

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

/* ---------- Testata ---------- */
.testata {
  max-width: var(--larghezza); margin: 0 auto; padding: 22px var(--margine);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titoli); font-weight: 600; font-size: 22px; }
.marchio-icona { width: 34px; height: 34px; }
.marchio-icona rect { fill: var(--plancia); }
.marchio-icona path { fill: none; stroke: var(--ambra); stroke-width: 3; stroke-linecap: round; }
.marchio-icona .ago { stroke: var(--plancia-ink); stroke-width: 2.5; }
.firma { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--attenuato); text-decoration: none; }
.firma img { width: 92px; height: auto; }

main { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }

/* ---------- Bottoni ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 30px 0 24px; border: 0; border-radius: 999px;
  background: var(--ambra); color: #16171b; text-decoration: none;
  font-family: var(--titoli); font-weight: 800; font-size: 24px; letter-spacing: .01em; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--ambra-scura);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.bottone:hover { background: #ffc040; }
.bottone:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ambra-scura); }
.bottone:disabled { opacity: .6; cursor: progress; }
.bottone-piccolo { min-height: 46px; font-size: 19px; padding: 0 20px 0 16px; }
.bottone-scuro { background: #16171b; color: #fff; box-shadow: 0 4px 0 #000; }
.bottone-scuro:hover { background: #2a2c33; }
/* La "chiave" del pulsante d'avvio: un cerchio che si illumina al passaggio. */
.accensione { width: 16px; height: 16px; border-radius: 50%; background: #16171b; box-shadow: inset 0 0 0 3px #16171b, inset 0 0 0 5px var(--ambra); transition: background-color .2s ease; }
.bottone:hover .accensione { background: var(--rosso); }
.bottone-secondario {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border: 1.5px solid var(--linea); border-radius: 999px; background: var(--superficie);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.bottone-secondario:hover { border-color: var(--inchiostro); }
.collegamento {
  background: none; border: 0; padding: 0; font-weight: 600;
  color: var(--accento-testo); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.nota { font-size: 15px; color: var(--attenuato); line-height: 1.5; }

/* ---------- Cruscotto ---------- */
.plancia {
  background: var(--plancia); color: var(--plancia-ink);
  border: 1px solid var(--plancia-bordo); border-radius: 220px 220px 36px 36px;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 36px) clamp(18px, 3vw, 30px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
.plancia-quadrante { position: relative; max-width: 420px; margin: 0 auto; }
.quadrante { width: 100%; height: auto; overflow: visible; }
.quadrante .pista { fill: none; stroke: #25272d; stroke-width: 10; stroke-linecap: round; }
.quadrante .zona { fill: none; stroke-width: 10; stroke-linecap: round; }
.quadrante .tacca { stroke: #5d6068; stroke-width: 1.5; }
.quadrante .tacca-lunga { stroke: #8d8a83; stroke-width: 2.5; }
.quadrante .numero-tacca { fill: var(--plancia-attenuato); font: 600 15px var(--titoli); text-anchor: middle; }
.quadrante .ago { transform-origin: 150px 150px; transition: transform 1s cubic-bezier(.34, 1.45, .5, 1); }
.quadrante .ago line { stroke: var(--plancia-ink); stroke-width: 4; stroke-linecap: round; }
.quadrante .perno { fill: var(--plancia-ink); stroke: var(--plancia); stroke-width: 4; }
.in-accensione .quadrante .ago { transition-duration: .7s; transition-timing-function: cubic-bezier(.5, 0, .3, 1); }
.plancia-lettura { position: absolute; left: 0; right: 0; bottom: -2%; text-align: center; line-height: 1; }
.plancia-lettura b { display: block; font: 800 clamp(56px, 7vw, 84px)/.9 var(--titoli); font-variant-numeric: tabular-nums; }
.plancia-lettura small { display: block; margin-top: 6px; font: 600 15px var(--titoli); letter-spacing: .03em; color: var(--plancia-attenuato); }

.spie { margin-top: clamp(18px, 3vw, 28px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.spia {
  display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; background: #121316;
  font: 600 13px/1.1 var(--titoli); letter-spacing: .02em; color: var(--plancia-attenuato); text-align: center;
}
.spia svg { width: 26px; height: 26px; fill: none; stroke: var(--spenta); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease, filter .3s ease; }
.spia[data-stato="rossa"] svg { stroke: var(--rosso); filter: drop-shadow(0 0 6px rgba(255, 74, 61, .7)); }
.spia[data-stato="ambra"] svg { stroke: var(--ambra); filter: drop-shadow(0 0 6px rgba(255, 178, 26, .6)); }
.spia[data-stato="gialla"] svg { stroke: var(--giallo); filter: drop-shadow(0 0 5px rgba(198, 232, 90, .45)); }
.spia[data-stato="verde"] svg { stroke: var(--verde); filter: drop-shadow(0 0 5px rgba(61, 220, 132, .45)); }
.spia[data-stato="prova"] svg { stroke: var(--plancia-ink); filter: drop-shadow(0 0 6px rgba(242, 239, 232, .6)); }
.spia[data-stato="esclusa"] { opacity: .45; }
.spia[data-stato="rossa"] { color: var(--plancia-ink); }
.spia[data-stato="rossa"] svg { animation: lampeggia 1.6s ease-in-out 2; }
@keyframes lampeggia { 50% { opacity: .35; } }

/* ---------- Apertura ---------- */
.apertura {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 72px);
  padding: clamp(16px, 4vw, 40px) 0 clamp(56px, 8vw, 96px);
}
.occhiello { font: 600 22px var(--titoli); color: var(--accento-testo); letter-spacing: .01em; }
h1 { margin-top: 12px; font-size: clamp(58px, 7.6vw, 116px); line-height: .86; text-transform: uppercase; max-width: 9.5em; }
.sommario { margin-top: 26px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 32em; color: var(--attenuato); }
.azioni { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.garanzie { display: grid; gap: 4px; font-size: 15px; color: var(--attenuato); }
.garanzie li { display: flex; align-items: center; gap: 8px; }
.garanzie li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(61, 220, 132, .2); }

/* ---------- Quiz ---------- */
.quiz {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: start;
  padding: 12px 0 96px; min-height: calc(100svh - 90px);
}
.quiz-testa { display: flex; align-items: center; justify-content: space-between; }
.indietro { background: none; border: 0; padding: 10px 0; color: var(--attenuato); font-size: 16px; font-weight: 600; }
.indietro::before { content: '‹'; margin-right: 8px; font-size: 22px; line-height: 0; position: relative; top: 1px; }
.indietro:hover { color: var(--inchiostro); }
.avanzamento { font: 600 18px var(--titoli); color: var(--attenuato); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.barra { height: 6px; background: var(--linea); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.barra span { display: block; height: 100%; background: var(--ambra); border-radius: 6px; transform-origin: left; transform: scaleX(0); transition: transform .45s cubic-bezier(.34, 1.3, .5, 1); }
.domanda { margin-top: clamp(32px, 6vh, 64px); }
.domanda fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.domanda legend { padding: 0; }
.domanda h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: .95; max-width: 15em; outline: none; }
.aiuto { margin-top: 14px; color: var(--attenuato); max-width: 36em; }
.opzioni { margin-top: 30px; display: grid; gap: 10px; }
.opzioni-molte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opzione {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 14px 18px; border-radius: 16px;
  background: var(--superficie); border: 2px solid var(--linea);
  cursor: pointer; font-weight: 500; line-height: 1.3;
  transition: border-color .15s ease, transform .12s ease, background-color .15s ease;
}
.opzione:hover { border-color: var(--inchiostro); }
.opzione:active { transform: scale(.985); }
.opzione input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opzione:has(input:focus-visible) { outline: 3px solid var(--ambra); outline-offset: 3px; }
.opzione:has(input:checked) { border-color: var(--ambra); background: color-mix(in srgb, var(--ambra) 14%, var(--superficie)); }
.opzione-separata { background: transparent; border-style: dashed; }
.tasto {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--fondo); font: 800 18px var(--titoli); color: var(--attenuato);
}
.opzione:has(input:checked) .tasto { background: var(--ambra); color: #16171b; }
.suggerimento { margin-top: 26px; font-size: 15px; color: var(--attenuato); }
@media (hover: none) { .suggerimento, .tasto { display: none; } }
.quiz-plancia { position: sticky; top: 20px; }
.quiz-plancia-nota { margin-top: 12px; text-align: center; font-size: 14px; color: var(--attenuato); }

/* ---------- Report ---------- */
.report { padding: 8px 0 64px; outline: none; }
.avviso-condiviso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 12px 12px 12px 24px; margin-bottom: 28px; border-radius: 999px; background: var(--superficie); border: 2px solid var(--ambra);
  font-weight: 500;
}
.report-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.settore { color: var(--attenuato); font-size: 16px; }
.report-esito h2 { margin-top: 8px; }
.livello { display: block; font-size: clamp(52px, 6.4vw, 92px); line-height: .86; text-transform: uppercase; }
.punteggio { display: block; margin-top: 12px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; color: var(--accento-testo); }
.livello-testo { margin-top: 14px; max-width: 32em; color: var(--attenuato); }
.tempo { margin-top: 26px; padding: 22px 24px; border-radius: 20px; background: var(--superficie); border: 2px solid var(--linea); }
.ore-totali { font: 600 26px var(--titoli); }
.ore-totali b { font-weight: 800; font-size: clamp(48px, 5vw, 64px); line-height: 1; margin-right: 6px; font-variant-numeric: tabular-nums; }
.tempo > p:not(.ore-totali) { color: var(--attenuato); margin-top: 4px; }
details summary { cursor: pointer; font-weight: 600; }
.tempo details { margin-top: 12px; font-size: 16px; }
.tempo details p { margin-top: 8px; color: var(--attenuato); }

.report-blocco { margin-top: clamp(56px, 7vw, 88px); }
.report-blocco h3, .condividi h3, .contatto h3 { font-size: clamp(34px, 3.6vw, 48px); text-transform: uppercase; }
.priorita { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.priorita li { display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: 20px; background: var(--superficie); border: 2px solid var(--linea); }
.priorita-icona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--plancia); }
.priorita-icona svg, .processo-icona svg { width: 28px; height: 28px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[data-stato="rossa"] > .priorita-icona svg, [data-stato="rossa"] > .processo-icona svg { stroke: var(--rosso); }
[data-stato="ambra"] > .priorita-icona svg, [data-stato="ambra"] > .processo-icona svg { stroke: var(--ambra); }
[data-stato="gialla"] > .priorita-icona svg, [data-stato="gialla"] > .processo-icona svg { stroke: var(--giallo); }
[data-stato="verde"] > .processo-icona svg { stroke: var(--verde); }
[data-stato="esclusa"] > .processo-icona svg { stroke: var(--spenta); }
.priorita-testa { display: grid; gap: 4px; }
.priorita h4 { font-size: 28px; text-transform: uppercase; }
.ore-voce { font-size: 15px; font-weight: 600; color: var(--accento-testo); }
.priorita p { margin-top: 8px; color: var(--attenuato); font-size: 17px; }
.vuoto { margin-top: 16px; color: var(--attenuato); max-width: 40em; }

.processi { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.processi li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1.5px solid var(--linea); }
.processo-icona { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--plancia); }
.processo-icona svg { width: 22px; height: 22px; }
.processi .nome { font-weight: 600; }
.processi .stato { color: var(--attenuato); font-size: 15px; text-align: right; }
.processi [data-stato="esclusa"] .nome { color: var(--attenuato); }

.demo {
  margin-top: clamp(56px, 7vw, 88px); padding: clamp(28px, 4vw, 48px); border-radius: 28px;
  background: var(--ambra); color: #16171b;
}
.demo-per { font: 600 20px var(--titoli); }
.demo h3 { margin-top: 8px; font-size: clamp(36px, 4vw, 56px); text-transform: uppercase; max-width: 18em; }
.demo p:not(.demo-per) { margin-top: 14px; max-width: 40em; font-size: 18px; }
.demo .bottone { margin-top: 24px; }

.condividi { margin-top: 64px; }
.condividi > p { margin-top: 8px; color: var(--attenuato); }
.condividi-azioni { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.esito-azione { margin-top: 12px; min-height: 1.6em; font-size: 16px; font-weight: 500; color: var(--accento-testo); overflow-wrap: anywhere; }
.esito-azione a { font-weight: 700; }

.contatto {
  margin-top: 64px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--superficie); border: 2px solid var(--linea);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px);
}
.contatto-intro p { margin-top: 14px; color: var(--attenuato); max-width: 30em; }
.modulo-contatto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo-largo, .invio, .modulo-contatto .esito-azione, .inviato { grid-column: 1 / -1; }
.campo label { font-size: 15px; font-weight: 600; }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--linea); background: var(--fondo);
  font-size: 16px; line-height: 1.5;
}
.campo textarea { resize: vertical; min-height: 150px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ambra); }
.campo [aria-invalid="true"] { border-color: var(--rosso); }
.invio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inviato { padding: 22px; border-radius: 16px; background: color-mix(in srgb, var(--verde) 18%, var(--superficie)); font-size: 18px; font-weight: 500; }
.ricomincia { margin-top: 40px; }

/* ---------- Guida (contenuto indicizzabile) ---------- */
.guida { padding: 88px 0 64px; border-top: 2px solid var(--linea); display: grid; gap: clamp(64px, 8vw, 112px); }
body[data-vista="report"] .guida { margin-top: 32px; }
.guida h2 { font-size: clamp(38px, 4.6vw, 64px); text-transform: uppercase; max-width: 16em; }
.colonne { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; max-width: 1100px; }
.colonne p { color: var(--attenuato); }
.passi { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: passo; }
.passi li { counter-increment: passo; padding: 26px; border-radius: 20px; background: var(--superficie); border: 2px solid var(--linea); }
.passi li::before {
  content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--plancia); color: var(--ambra); font: 800 22px var(--titoli); margin-bottom: 16px;
}
.passi h3 { font-size: 30px; text-transform: uppercase; }
.passi p { margin-top: 10px; color: var(--attenuato); }
.faq details { border-top: 2px solid var(--linea); max-width: 900px; }
.faq h2 + details { margin-top: 26px; }
.faq details:last-child { border-bottom: 2px solid var(--linea); }
.faq summary { list-style: none; padding: 20px 52px 20px 0; position: relative; font-size: 20px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--plancia); color: var(--ambra); font: 800 22px/1 var(--titoli);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 52px 22px 0; color: var(--attenuato); max-width: 44em; }
.chiusura { padding: clamp(32px, 5vw, 60px); border-radius: 28px; background: var(--plancia); color: var(--plancia-ink); }
.chiusura h2 { color: var(--ambra); }
.chiusura p { margin-top: 18px; max-width: 38em; color: #c9c6be; font-size: 19px; }
.chiusura .collegamento { color: var(--plancia-ink); }

.piede {
  max-width: var(--larghezza); margin: 0 auto; padding: 32px var(--margine) 48px;
  display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--attenuato);
}
.piede a { text-decoration: none; }
.piede a:hover { text-decoration: underline; }

/* ---------- Schermi stretti ---------- */
@media (max-width: 960px) {
  .apertura { grid-template-columns: 1fr; }
  .apertura .plancia { max-width: 560px; }
  .quiz { grid-template-columns: 1fr; gap: 0; }
  /* Durante il quiz il cruscotto diventa una striscia compatta sopra le domande. */
  .quiz-plancia { order: -1; position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--margine) * -1) 8px; padding: 8px var(--margine); background: var(--fondo); }
  .quiz-plancia-nota { display: none; }
  .plancia.plancia-live { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 12px; border-radius: 20px; padding: 10px 12px; }
  .plancia-live .plancia-quadrante { width: 116px; }
  .plancia-live .numero-tacca { display: none; }
  .plancia-live .plancia-lettura b { font-size: 34px; }
  .plancia-live .plancia-lettura small { display: none; }
  .plancia-live .spie { margin: 0; gap: 4px; }
  .plancia-live .spia { padding: 8px 2px; background: transparent; }
  .plancia-live .spia span { display: none; }
  .plancia-live .spia svg { width: 22px; height: 22px; }
  .report-testa, .contatto { grid-template-columns: 1fr; }
  .priorita, .passi { grid-template-columns: 1fr; }
  .processi { grid-template-columns: 1fr; }
  .colonne { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .testata { padding-top: 14px; padding-bottom: 10px; }
  .firma img { width: 76px; }
  .spie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plancia-live .spie { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .plancia { border-radius: 160px 160px 28px 28px; }
  .opzioni-molte { grid-template-columns: 1fr; }
  .opzione { min-height: 56px; padding: 12px 14px; }
  .modulo-contatto { grid-template-columns: 1fr; }
  .avviso-condiviso { border-radius: 20px; padding: 16px; }
  .bottone { font-size: 22px; }
}

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