/* Boosted v4 · bozza E — pagina «Contatti» (contatti.html + pagine/contatti.js).
   Usa e.css (colori, cromo, titoli che salgono, la chiusura «Mezz’ora insieme, gratis»), tasti/tasti.css (il metallo)
   e parti/menu.css (testata e menu). Pagina corta: apertura con la chat di WhatsApp, le tre strade dirette,
   la mezz’ora, Arezzo sulla mappa, il contatto. Dentro al telefono 1em = larghezza del telefono / 25.
   Si muove solo con transform, opacity e clip-path. Movimento ridotto e html.fermo = stato finale. Mobile first. */

.ct-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
main { display: block; }
main h3 { margin: 0; }
:root { --molla: cubic-bezier(0.34, 1.5, 0.64, 1); --largo: 1296px; }

/* loops stop off screen (contatti.js puts .fuori on the sections that are not in view) */
.fuori .cromo, .fuori.cromo, .fuori .ct-eroe__luce { animation-play-state: paused !important; }

/* ── Apertura ───────────────────────────────────────────── */
.ct-eroe {
  position: relative; display: grid; gap: 40px;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 40px) var(--g) 32px;
  isolation: isolate; overflow-x: clip;
}
.ct-eroe__luce {
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 30%;
  width: 150vw; max-width: 1400px; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.30), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 66% 44%, rgba(201, 169, 233, 0.13), rgba(201, 169, 233, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) .ct-eroe__luce { animation: ct-respira 9s ease-in-out infinite alternate; } }
@keyframes ct-respira { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.ct-eroe__sopra { font-size: 14.5px; color: var(--sec); margin-bottom: 18px; }
.ct-eroe__titolo { font-size: clamp(48px, 13.4vw, 136px); line-height: 0.98; font-weight: 760; letter-spacing: -0.034em; text-wrap: balance; max-width: 7.2em; }
.ct-eroe__titolo .cromo { white-space: nowrap; }
.ct-eroe__sotto { margin-top: 24px; max-width: 26em; color: var(--sec); font-size: clamp(18px, 4.8vw, 22px); line-height: 1.48; }
.ct-eroe__azione { margin-top: 34px; display: grid; justify-items: start; gap: 14px; }
.ct-eroe__azione .cta { width: 100%; justify-content: space-between; }
.ct-eroe__nota { font-size: 14.5px; line-height: 1.5; color: var(--sec); max-width: 30em; }
.ct-wa { margin: 0; display: grid; justify-items: center; }
@media (min-width: 768px) { .ct-eroe__azione .cta { width: auto; min-width: 340px; } }
@media (min-width: 1024px) {
  .ct-eroe {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 72px;
    min-height: 100svh; max-width: calc(var(--largo) + 2 * var(--g)); margin: 0 auto; padding-bottom: 56px;
  }
  .ct-eroe__titolo { font-size: clamp(76px, 7.4vw, 128px); }
}

/* ══ Il telefono delle schermate d'esempio ═══════════════════ */
.tel {
  --tel-w: 280px;
  position: relative; flex: none; width: var(--tel-w); height: calc(var(--tel-w) * 2.06);
  padding: calc(var(--tel-w) * 0.03); border-radius: calc(var(--tel-w) * 0.165);
  background: linear-gradient(165deg, #3a3c43 0%, #17191c 18%, #0c0d0f 58%, #1c1e23 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 44px 80px -30px rgba(0, 0, 0, 0.95);
  font-family: 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: -0.01em; text-align: left;
}
.tel__schermo {
  --u: calc(var(--tel-w) / 25);
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--tel-w) * 0.137);
  font-size: var(--u); line-height: 1.3; color: #F5F5F7; background: #000;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.tel__schermo::before {
  content: ''; position: absolute; z-index: 30; top: calc(var(--u) * 1.05); left: 50%;
  width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.15); margin-left: calc(var(--u) * -3.7); border-radius: 999px; background: #000;
}
.tel__stato {
  position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: calc(var(--u) * 4.3);
  display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 0.4) calc(var(--u) * 2) 0 calc(var(--u) * 2.5);
  pointer-events: none;
}
.tel__stato b { font-size: 1.22em; font-weight: 600; letter-spacing: -0.01em; }
.tel__icone { width: calc(var(--u) * 5.4); height: calc(var(--u) * 0.95); fill: currentColor; }
.tel__barra { position: absolute; z-index: 25; bottom: calc(var(--u) * 0.55); left: 50%; width: calc(var(--u) * 8.6); height: calc(var(--u) * 0.36); margin-left: calc(var(--u) * -4.3); border-radius: 999px; background: rgba(255, 255, 255, 0.82); }
.tel svg { fill: currentColor; }

/* ══ WhatsApp: la chat con Boosted Company, col messaggio già scritto ══ */
.wa-tel { --tel-w: min(68vw, 272px); }
@media (min-width: 1024px) { .wa-tel { --tel-w: clamp(268px, min(25vw, calc((100svh - 230px) / 2.06)), 330px); } }
.wa { display: flex; flex-direction: column; background-color: #0b141a; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 0.08em, rgba(255, 255, 255, 0) 0.1em), radial-gradient(rgba(255, 255, 255, 0.025) 0.12em, rgba(255, 255, 255, 0) 0.14em); background-size: 1.5em 1.5em, 2.3em 2.3em; background-position: 0 0, 0.7em 1.1em; }
.wa__testa { position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: 1.5em 2.75em minmax(0, 1fr) 1.75em 1.6em; gap: 0.6em; align-items: center; padding: calc(var(--u) * 4.5) 1.1em 0.7em 0.55em; background: #121b22; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); }
.wa__ic { width: 1.6em; height: 1.6em; color: #e9edef; }
.wa__ic--indietro { width: 1.5em; height: 1.5em; color: #e9edef; }
.wa__avatar { display: grid; place-items: center; width: 2.75em; height: 2.75em; border-radius: 50%; background: #08090A; box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.25); overflow: hidden; }
.wa__avatar img { width: 62%; height: auto; transform: translateY(2%); }
.wa__chi { min-width: 0; }
.wa__chi b { display: block; font-size: 1.12em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e9edef; }
.wa__chi small { display: block; font-size: 0.84em; color: #8696a0; white-space: nowrap; }
.wa__chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.55em; padding: 0.8em 1.1em 0.7em; overflow: hidden; }
.wa__sistema { align-self: center; display: flex; gap: 0.45em; max-width: 92%; padding: 0.5em 0.75em; border-radius: 0.7em; background: #182229; color: #8696a0; font-size: 0.86em; line-height: 1.36; text-align: center; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); }
.wa__sistema svg { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.12em; }
.wa__sistema b { font-weight: 500; color: #53bdeb; }
.wa__sistema--giallo { color: #ffd279; }
.wa__barra { position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: 1.7em minmax(0, 1fr) 4.2em; gap: 0.55em; align-items: end; padding: 0.55em 0.75em 0.6em; background: #121b22; }
/* with text in the field the camera and the mic go, and the field takes their place */
.ct-wa:not(.anima) .wa__barra, .ct-wa.scritto .wa__barra { grid-template-columns: 1.7em minmax(0, 1fr) 2.6em; }
.wa__piu { width: 1.7em; height: 1.7em; margin-bottom: 0.5em; color: #e9edef; }
.wa__campo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1.45em; gap: 0.35em; align-items: end; min-height: 2.6em; padding: 0.55em 0.65em 0.55em 0.85em; border-radius: 1.3em; background: #1f2c34; }
.wa__scritto { min-width: 0; font-size: 1.08em; line-height: 1.32; color: #e9edef; overflow-wrap: anywhere; }
.wa__cursore { display: inline-block; width: 0.12em; height: 1.15em; margin-left: 0.05em; vertical-align: -0.2em; border-radius: 1px; background: #21C063; }
.wa__adesivo { width: 1.45em; height: 1.45em; color: #8696a0; margin-bottom: 0.05em; }
.wa__vuoto, .wa__invia { grid-column: 3; grid-row: 1; align-self: end; height: 2.6em; display: flex; align-items: center; justify-content: flex-end; gap: 0.8em; transition: opacity 180ms ease-out, transform 260ms var(--molla); }
.wa__vuoto svg { width: 1.6em; height: 1.6em; color: #e9edef; }
.wa__invia { justify-self: end; justify-content: center; width: 2.6em; border-radius: 50%; background: #21C063; color: #fff; box-shadow: 0 0 0 0.35em rgba(33, 192, 99, 0.18); }
.wa__invia svg { width: 1.3em; height: 1.3em; margin-left: 0.12em; }
/* final state by default (send button ready); while it writes (.anima) the field starts empty */
.wa__vuoto { opacity: 0; transform: scale(0.7); }
.ct-wa.anima:not(.scritto) .wa__vuoto { opacity: 1; transform: none; }
.ct-wa.anima:not(.scritto) .wa__invia { opacity: 0; transform: scale(0.6); }
.ct-wa.anima:not(.finito) .wa__invia { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .ct-wa.in-vista .wa__cursore { animation: ct-lampeggia 1.05s steps(1) infinite; }
  html:not(.fermo) .ct-wa.in-vista.finito .wa__invia { animation: ct-pronto 2.4s ease-in-out 600ms infinite; }
}
@keyframes ct-lampeggia { 50% { opacity: 0; } }
@keyframes ct-pronto { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.1); } 90% { transform: scale(0.97); } }

/* the iPhone keyboard, dark */
.tastiera { flex: none; display: grid; gap: 0.82em; padding: 0 0.3em 0.4em; background: #262628; }
.tastiera__idee { display: grid; grid-template-columns: repeat(3, 1fr); height: 2.7em; align-items: center; margin: 0 -0.3em; color: #f2f2f7; font-size: 1.12em; text-align: center; }
.tastiera__idee span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.3em; }
.tastiera__idee span + span { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.14); }
.tastiera__riga { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.4em; }
.tastiera__riga--rientro { padding: 0 calc((100% - 0.4em * 9) / 20); grid-template-columns: repeat(9, 1fr); }
.tastiera__riga:nth-child(4) { grid-template-columns: 1.35fr repeat(7, 1fr) 1.35fr; gap: 0.4em; }
.tastiera__riga:nth-child(4) .tastiera__fn:first-child { margin-right: 0.45em; }
.tastiera__riga:nth-child(4) .tastiera__fn:last-child { margin-left: 0.45em; }
.tastiera__riga--fondo { grid-template-columns: 1.2fr 1.2fr 5fr 2.4fr; }
.tastiera b {
  display: grid; place-items: center; height: 3.05em; border-radius: 0.42em;
  background: #5c5c60; color: #fff; font-weight: 400; font-size: 1em; box-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.55);
  transition: background-color 160ms ease-out;
}
.tastiera b[data-k]:not(.tastiera__fn):not(.tastiera__spazio) { font-size: 1.42em; height: calc(3.05em / 1.42); border-radius: calc(0.42em / 1.42); }
.tastiera .tastiera__fn { background: #3c3c3f; font-size: 1.02em; }
.tastiera .tastiera__fn svg { width: 1.45em; height: 1.45em; }
.tastiera__spazio { font-size: 1.05em !important; }
.tastiera__invio { font-size: 1.05em !important; }
.tastiera b.giu { background: #8e8e93; transition: none; }
.tastiera .tastiera__fn.giu { background: #6c6c70; }
.tastiera__sotto { display: flex; justify-content: space-between; padding: 0.1em 1.6em 1.9em; color: #c7c7cc; }
.tastiera__sotto svg { width: 1.75em; height: 1.75em; }

/* ── Le strade dirette: tre righe di vetro, un tocco e si apre ── */
.ct-diretti { padding: 8px var(--g) 0; max-width: calc(var(--largo) + 2 * var(--g)); margin: 0 auto; }
.dr { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dr__riga {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 72px; padding: 12px 14px; border-radius: 20px; text-decoration: none; color: var(--testo);
  background: rgba(15, 16, 17, 0.72); box-shadow: inset 0 0 0 1px var(--riga-2);
  -webkit-tap-highlight-color: transparent; transition: box-shadow 200ms ease-out, transform 200ms var(--curva);
}
.dr__riga:active { transform: scale(0.985); }
.dr__riga:focus-visible { outline: 2px solid var(--lilla); outline-offset: 3px; }
@media (hover: hover) { .dr__riga:hover { box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.5); } }
.dr__icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.1); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.3); }
.dr__icona svg { width: 21px; height: 21px; fill: currentColor; }
.dr__testo { display: grid; gap: 2px; min-width: 0; }
.dr__testo small { font-size: 13.5px; font-weight: 600; color: var(--sec); }
.dr__testo b { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.dr__testo .dr__mail { font-size: clamp(13.5px, 3.75vw, 17px); font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .ct-diretti { padding-top: 24px; }
  .dr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 16px; }
  .dr__riga { min-height: 88px; padding: 16px 22px; }
  .dr__testo .dr__mail { font-size: 16px; }
}

/* ── La mezz’ora: quattro righe che si accendono mentre le leggi, poi cosa succede dopo ── */
.ct-mezzora { display: grid; max-width: calc(var(--largo) + 2 * var(--g)); margin: 0 auto; padding: 96px var(--g) 0; }
.ct-titolo { font-size: clamp(40px, 10.6vw, 88px); line-height: 1; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; max-width: 10em; }
.mz { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--riga); }
.mz__riga { position: relative; display: grid; gap: 6px; padding: 18px 0 20px; border-bottom: 1px solid var(--riga); }
.mz__riga::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--cromo); background-size: 240% 100%; transform-origin: 0 50%; transition: transform 900ms var(--curva); }
.mz__nome { font-size: clamp(21px, 5.6vw, 28px); line-height: 1.12; font-weight: 720; letter-spacing: -0.022em; color: var(--testo); transition: color 500ms ease-out; }
.mz.anima .mz__riga:not(.acceso)::before { transform: scaleX(0); }
.mz.anima .mz__riga:not(.acceso) .mz__nome { color: rgba(247, 248, 248, 0.5); }
.mz__riga p { color: var(--sec); font-size: 16px; line-height: 1.5; max-width: 30em; }
.mz__dopo { margin-top: 22px; max-width: 34em; color: var(--sec); font-size: 16px; line-height: 1.55; }
.mz__dopo b { color: var(--testo); font-weight: 650; }
@media (min-width: 1024px) {
  .ct-titolo { font-size: clamp(56px, 5.4vw, 80px); max-width: 11em; }
  .ct-mezzora { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; padding-top: 144px; }
  .mz { margin-top: 8px; }
  .mz__riga { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: baseline; padding: 22px 0 24px; }
  .mz__nome { font-size: 24px; }
  .mz__riga p, .mz__dopo { font-size: 17px; }
}

/* ── Dove: Arezzo e aree limitrofe, con la mappa disegnata ── */
.ct-sez { position: relative; display: grid; gap: 32px; max-width: calc(var(--largo) + 2 * var(--g)); margin: 0 auto; padding: 96px var(--g) 0; }
.ct-vista { position: relative; margin: 0; display: grid; justify-items: center; align-content: start; gap: 12px; }
@media (min-width: 1024px) {
  .ct-sez { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 88px; align-items: center; padding-top: 144px; }
}
.dv__testo { margin-top: 20px; max-width: 30em; color: var(--sec); font-size: 17px; line-height: 1.55; }
.da-confermare { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--lilla-chiaro); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.5); background: rgba(201, 169, 233, 0.08); }

/* the map: drawn by us, indicative positions */
.mp { width: 100%; }
.mp__tela { position: relative; width: 100%; max-width: 560px; aspect-ratio: 581 / 720; border-radius: 24px; overflow: hidden; background: #0b0c0f; box-shadow: inset 0 0 0 1px var(--riga-2), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.mp__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp__anelli circle { fill: none; stroke: rgba(201, 169, 233, 0.24); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.mp__lago { fill: rgba(139, 111, 184, 0.24); stroke: rgba(201, 169, 233, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp__fiumi path { fill: none; stroke: rgba(150, 125, 200, 0.75); stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp__strade path { fill: none; stroke: rgba(247, 248, 248, 0.17); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp__autostrada { fill: none; stroke: rgba(247, 248, 248, 0.34); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp__scritte { position: absolute; inset: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; line-height: 1; color: #b8bdc6; letter-spacing: 0; pointer-events: none; }
.mp__scritte > span { position: absolute; white-space: nowrap; text-shadow: 0 0 3px #0b0c0f, 0 0 6px #0b0c0f, 0 0 10px #0b0c0f; }
.mp__paese::before { content: ''; position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #d5d8de; box-shadow: 0 0 0 2px #0b0c0f; }
.mp__paese--d { transform: translate(9px, -50%); }
.mp__paese--d::before { left: -9px; top: 50%; }
.mp__paese--s { transform: translate(calc(-100% - 9px), -50%); }
.mp__paese--s::before { left: calc(100% + 9px); top: 50%; }
.mp__paese--su { transform: translate(-50%, calc(-100% - 8px)); }
.mp__paese--su::before { left: 50%; top: calc(100% + 8px); }
.mp__paese--giu { transform: translate(-50%, 8px); }
.mp__paese--giu::before { left: 50%; top: -8px; }
.mp__km { transform: translate(-50%, -50%); padding: 1px 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: rgba(201, 169, 233, 0.7); background: #0b0c0f; border-radius: 4px; text-shadow: none !important; }
.mp__strada-n { transform: translate(-50%, -50%); padding: 2px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #F7F8F8; background: #1F2126; box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.28); text-shadow: none !important; }
.mp__fiume-n { transform: translate(-100%, -50%); font-style: italic; color: #a58fd0; }
.mp__lago-n { transform: translate(-50%, -50%); font-style: italic; text-align: center; line-height: 1.25; color: #c3b1e3; }
.mp__verso { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7d838e; }
.mp__verso--no { transform: translate(0, -50%); }
.mp__verso--no::before { content: '↖ '; }
.mp__verso--o { transform: translate(0, -50%); }
.mp__verso--o::before { content: '← '; }
.mp__verso--se { transform: translate(-100%, -50%); }
.mp__verso--se::after { content: ' ↘'; }
.mp__arezzo { display: flex; align-items: center; gap: 9px; transform: translate(-9px, -50%); }
.mp__arezzo b { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; color: #fff; font-family: 'Montserrat', 'Inter', sans-serif; }
.mp__pin { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #C9A9E9 26% 100%); box-shadow: 0 0 0 3px rgba(201, 169, 233, 0.25), 0 0 18px rgba(201, 169, 233, 0.8); }
.mp__pin::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(201, 169, 233, 0.7); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .mp.in-vista .mp__pin::after { animation: ct-onda 2.4s ease-out infinite; }
}
@keyframes ct-onda { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
.mp__nota { margin-top: 12px; font-size: 12.5px; color: var(--sec); }
/* reveal: the map opens from Arezzo outwards, then the names come in */
html.js .mp.anima .mp__svg { clip-path: circle(0% at 52.46% 41.21%); transition: clip-path 1700ms var(--curva); }
html.js .mp.anima.visto .mp__svg { clip-path: circle(150% at 52.46% 41.21%); }
html.js .mp.anima .mp__scritte > span:not(.mp__arezzo) { opacity: 0; transition: opacity 600ms ease-out; transition-delay: calc(var(--t, 3) * 170ms + 350ms); }
html.js .mp.anima.visto .mp__scritte > span { opacity: 1; }
@media (min-width: 1024px) {
  .ct-dove { align-items: center; }
  .mp__scritte { font-size: 12.5px; }
  .mp__km, .mp__strada-n, .mp__verso { font-size: 10.5px; }
  .mp__arezzo b { font-size: 17px; }
}

/* ── Contatto: la chiusura della home (stili in e.css) e sotto la riga con l’email ── */
.chiusura__email { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.chiusura__risposta { display: inline-block; }
@media (min-width: 768px) { .chiusura__risposta::before { content: "·"; margin-right: 12px; } }
.chiusura__email .collegamento { margin-left: 0; overflow-wrap: anywhere; }

/* ── Movimento ridotto o fermato: tutto allo stato finale ── */
@media (prefers-reduced-motion: reduce) {
  html.js .mp.anima .mp__svg { clip-path: none; }
  html.js .mp.anima .mp__scritte > span { opacity: 1; }
}
html.fermo .mp.anima .mp__svg { clip-path: none; }
html.fermo .mp.anima .mp__scritte > span { opacity: 1; }
html.fermo .mz.anima .mz__riga::before { transform: none; }
html.fermo .mz.anima .mz__riga .mz__nome { color: var(--testo); }
/* ══ Domande veloci (stesse FAQ di intelligenza-artificiale) ═══ */
.ct-faq { max-width: calc(var(--largo) + 2 * var(--g)); margin: 0 auto; padding: 96px var(--g) 0; }
@media (min-width: 1024px) { .ct-faq { padding-top: 144px; } }
.fq { max-width: 1296px; margin: 0 auto; display: grid; gap: 30px; }
.fq__lista { border-top: 1px solid var(--riga); }
.fq__voce { border-bottom: 1px solid var(--riga); }
.fq__voce summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; touch-action: manipulation;
}
.fq__voce summary::-webkit-details-marker { display: none; }
.fq__voce summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--riga-2); transition: transform 300ms var(--curva), background-color 200ms ease-out; }
.fq__voce summary i::before, .fq__voce summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; border-radius: 2px; background: var(--lilla); }
.fq__voce summary i::after { transform: rotate(90deg); transition: transform 300ms var(--curva); }
.fq__voce[open] summary i { transform: rotate(180deg); background: rgba(201, 169, 233, 0.1); }
.fq__voce[open] summary i::after { transform: rotate(0deg); }
.fq__voce summary:active { color: var(--lilla-chiaro); }
@media (hover: hover) { .fq__voce summary:hover { color: var(--lilla-chiaro); } }
.fq__voce p { max-width: 38em; padding: 0 44px 22px 0; color: var(--sec); font-size: 16.5px; line-height: 1.6; }
@media (min-width: 1024px) {
  .fq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
  .fq__titolo { position: sticky; top: calc(var(--testa) + 48px); font-size: clamp(44px, 4.4vw, 64px); }
  .fq__voce summary { font-size: 20px; min-height: 72px; }
}