/* Traslochi Gentile. Prima il telefono; da 980 px in su la pagina è un manifesto che scala con --u
   (1 --u = 1 px sul design a 1440). La hero si sceglie con data-hero su <html>: un punto solo. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --giallo: #FFFF00;
  --rosso: #FD0E21;
  --blu: #0000BB;
  --oro: #FEC500;
  --nero: #101114;
  --bianco: #FFFFFF;
  --crema: #FCF6F3;
  --linea: #C2C4CB;
  --carta: #EFF0F2;
  --azzurrino: #E4ECFB;
  --u: calc(min(100vw, 1560px) / 1440);
  --h-testata: 64px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--h-testata) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--nero);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.32;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 4px; }

.ico { display: block; width: 1em; height: 1em; flex: none; overflow: visible; }

.salta {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--blu); color: var(--bianco); padding: 10px 14px; border-radius: 8px; font-weight: 700;
}
.salta:focus { top: 12px; }

/* ── Pulsanti ─────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 8px 22px;
  border-radius: 999px;
  color: var(--bianco);
  font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -.005em;
  text-decoration: none; text-align: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .14s var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}
.btn .ico { font-size: 22px; --blu: #FFFFFF; --rosso: #FFFFFF; --giallo: #FFFFFF; }
.btn--rosso { background: var(--rosso); box-shadow: 0 6px 16px rgba(253, 14, 33, .28); }
.btn--blu { background: var(--blu); box-shadow: 0 6px 16px rgba(0, 0, 187, .26); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--rosso:hover { background: #D90A1B; box-shadow: 0 10px 22px rgba(253, 14, 33, .34); }
  .btn--blu:hover { background: #000093; box-shadow: 0 10px 22px rgba(0, 0, 187, .32); }
  .btn:active { transform: scale(.97); }
}

/* ── Testata ──────────────────────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 40;
  background: var(--bianco);
  box-shadow: 0 1px 0 rgba(16, 17, 20, .07);
}
html[data-hero="gialla"] .testata { background: var(--giallo); box-shadow: none; }
.testata { transition: box-shadow .25s ease; }
.testata--scesa { box-shadow: 0 8px 24px rgba(16, 17, 20, .1); }
html[data-hero="gialla"] .testata--scesa { box-shadow: 0 8px 24px rgba(16, 17, 20, .12); }
.testata__dentro {
  display: flex; align-items: center; gap: 8px;
  height: var(--h-testata);
  padding-inline: 16px;
}
.testata__logo { position: relative; z-index: 2; flex: none; margin-right: auto; }
.testata__logo img { width: clamp(112px, 37vw, 168px); }
.testata__riga { display: none; }
.testata__tel {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding-inline: 12px;
  background: var(--rosso); color: var(--bianco);
  border-radius: 10px;
  font-size: 16px; font-weight: 800; white-space: nowrap; text-decoration: none;
  transition: transform .14s var(--ease-out), background-color .2s ease;
}
.testata__tel .ico { font-size: 17px; --blu: #FFFFFF; --rosso: #FFFFFF; --giallo: #FFFFFF; }
.testata__tel:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .testata__tel:hover { background: #D90A1B; } }
.testata__apri {
  position: relative; z-index: 2;
  display: grid; align-content: center; justify-items: center; gap: 5px;
  width: 44px; height: 44px; margin-right: -6px;
  background: none; border: 0; cursor: pointer; color: var(--nero);
  user-select: none; -webkit-user-select: none;
}
.testata__apri span { display: block; width: 24px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .15s ease; }
.menu-aperto .testata__apri span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-aperto .testata__apri span:nth-child(2) { opacity: 0; }
.menu-aperto .testata__apri span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 1;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 4px;
  padding: calc(var(--h-testata) + 20px) 20px 32px;
  background: inherit;
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0;
  transition: opacity .16s ease, visibility .16s;
}
.menu-aperto .menu { transition: opacity .26s var(--ease-out), visibility .26s; }
.testata .menu { background: var(--bianco); }
html[data-hero="gialla"] .testata .menu { background: var(--giallo); }
.menu-aperto .menu { visibility: visible; opacity: 1; }
.menu a {
  display: block; padding: 14px 4px;
  font-size: 28px; font-weight: 800; letter-spacing: -.01em; text-decoration: none;
  border-bottom: 2px solid rgba(16, 17, 20, .08);
  user-select: none; -webkit-user-select: none;
}
.menu a:active { color: var(--rosso); }
.menu a { opacity: 0; transform: translateY(14px); transition: opacity .12s ease, transform .12s ease; }
.menu-aperto .menu a { opacity: 1; transform: none; transition: opacity .36s var(--ease-out), transform .36s var(--ease-out); }
.menu-aperto .menu a:nth-child(2) { transition-delay: .05s; }
.menu-aperto .menu a:nth-child(3) { transition-delay: .1s; }
.menu-aperto .menu a:nth-child(4) { transition-delay: .15s; }
.menu-aperto .menu a:nth-child(5) { transition-delay: .2s; }
.menu-aperto .menu a:nth-child(6) { transition-delay: .25s; }
.menu-aperto .menu a:nth-child(7) { transition-delay: .3s; }
.menu-aperto .menu a:nth-child(8) { transition-delay: .35s; }
.menu-aperto .menu a:nth-child(9) { transition-delay: .4s; }

/* ── Hero: gli stessi testi, due impaginazioni ────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--crema); }
html[data-hero="gialla"] .hero { background: var(--giallo); }
.hero__testi { position: relative; z-index: 2; padding: 22px 16px 0; }
.hero__occhiello { font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hero__occhiello::after { content: ""; display: block; width: 58px; height: 4px; margin-top: 8px; background: var(--oro); }
.hero__titolo {
  margin-top: 12px;
  font-size: clamp(46px, 14vw, 88px); font-weight: 900; line-height: .98; letter-spacing: -.022em;
}
.hero__titolo span { display: block; color: var(--rosso); }
.hero__frase { margin-top: 10px; font-size: 19px; line-height: 1.2; }
.hero__evidenza {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 5px 9px;
  background: var(--giallo);
  font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.005em;
}
.hero__evidenza .ico { display: none; font-size: 24px; }
.hero__pulsanti { display: grid; gap: 8px; margin-top: 14px; }
.hero__nota { margin-top: 8px; font-size: 15px; font-style: italic; text-align: center; }
.hero__scena {
  position: relative; z-index: 1;
  width: 146%; margin: -3% 0 0 -46%;
  aspect-ratio: 1664 / 936;
  background: center / 100% 100% no-repeat;
}
html[data-hero="chiara"] .hero__scena {
  background-image: url("../img/hero-chiara-1100.webp");
  background-image: image-set(url("../img/hero-chiara-1100.webp") 1x, url("../img/hero-chiara-1664.webp") 2x);
}
html[data-hero="gialla"] .hero__scena {
  background-image: url("../img/hero-gialla-1100.webp");
  background-image: image-set(url("../img/hero-gialla-1100.webp") 1x, url("../img/hero-gialla-1664.webp") 2x);
}
.etichetta {
  position: absolute; display: inline-flex; align-items: center; gap: 4px;
  font-size: clamp(11px, 3.3vw, 22px); font-weight: 800; line-height: 1; white-space: nowrap;
}
.etichetta .ico { width: 1.15em; height: 1.75em; }
.etichetta .ico--rosso { display: none; }
.etichetta--parte { left: 66%; top: 6%; }
.etichetta--arriva { left: 84.5%; top: 11.5%; }
.hero__punti {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 4px 8px 22px;
}
.hero__punti li {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-inline: 6px;
  font-size: 14px; font-weight: 700; line-height: 1.15; text-align: center;
}
.hero__punti li + li { border-left: 1px solid var(--linea); }
.hero__punti .ico { font-size: 32px; }
.hero::after { content: none; }
html[data-hero="chiara"] .hero__scena::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background: linear-gradient(to bottom, rgba(252, 246, 243, 0), var(--crema));
}

/* La gialla: titolo rosso, pillola blu, niente frase e niente punti */
html[data-hero="gialla"] .hero__occhiello { font-weight: 800; letter-spacing: .01em; }
html[data-hero="gialla"] .hero__occhiello::after,
html[data-hero="gialla"] .hero__frase,
html[data-hero="gialla"] .hero__punti { display: none; }
html[data-hero="gialla"] .hero__titolo { margin-top: 6px; color: var(--rosso); }
html[data-hero="gialla"] .hero__evidenza {
  padding: 9px 16px; border-radius: 999px;
  background: var(--blu); color: var(--bianco);
  font-weight: 700;
}
html[data-hero="gialla"] .hero__evidenza .ico { display: block; --blu: #FFFFFF; --giallo: var(--blu-fondo, #0000BB); --rosso: #FFFFFF; }
html[data-hero="gialla"] .hero__scena { width: 110%; margin: 0 0 0 -7%; }
html[data-hero="gialla"] .etichetta {
  gap: 3px; padding: 3px 8px 3px 5px;
  background: var(--bianco); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(16, 17, 20, .22);
}
html[data-hero="gialla"] .etichetta .ico { width: .85em; height: 1.3em; }
html[data-hero="gialla"] .etichetta .ico--blu { display: none; }
html[data-hero="gialla"] .etichetta .ico--rosso { display: block; }
html[data-hero="gialla"] .etichetta--parte { left: 78%; top: 2.5%; }
html[data-hero="gialla"] .etichetta--arriva { left: 74%; top: 60%; }

/* ── Chiama e WhatsApp sempre a portata: da telefono la barra in basso ────────────────── */
.azioni {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bianco);
  box-shadow: 0 -4px 18px rgba(16, 17, 20, .12);
}
.azione {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 999px;
  color: var(--bianco);
  font-size: 17px; font-weight: 800; text-decoration: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .14s var(--ease-out), background-color .2s ease;
}
.azione .ico { font-size: 20px; --blu: #FFFFFF; --rosso: #FFFFFF; --giallo: #FFFFFF; }
.azione--rossa { background: var(--rosso); }
.azione--blu { background: var(--blu); }
.azione:active { transform: scale(.97); }

/* ── Le sezioni ───────────────────────────────────────────────────────────────────────── */
.sezione { padding: 40px 16px; }
.titolo { font-size: clamp(30px, 8.7vw, 56px); font-weight: 850; line-height: 1.05; letter-spacing: -.022em; }
.titolo span { display: block; color: var(--rosso); text-wrap: balance; }
.titolo::after { content: ""; display: block; width: 58px; height: 4px; margin-top: 12px; background: var(--oro); }

/* Servizi: telefono, a zig-zag coi tragitti tratteggiati */
.servizi__tragitti { display: none; }
.servizi__palco { margin-top: 22px; }
.serv {
  position: relative;
  display: grid; grid-template-columns: 41% 1fr; gap: 12px; align-items: center;
  padding-bottom: 54px;
}
.serv:last-child { padding-bottom: 0; }
.serv:nth-child(odd) { grid-template-columns: 1fr 41%; }
.serv:nth-child(odd) .serv__img { order: 2; }
.serv__tragitto { position: absolute; left: 14%; right: 14%; bottom: 8px; width: 72%; height: 40px; overflow: visible; }
.serv:nth-child(odd) .serv__tragitto { transform: scaleX(-1); }
.serv__tragitto path { fill: none; stroke: var(--blu); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; }
.serv__tragitto .tratto { stroke-dasharray: none; }
.serv__img { width: 100%; max-height: 170px; object-fit: contain; }
.serv__testo h3, .passo__testo h3, .zona__domanda { text-wrap: balance; }
.serv__testo h3 {
  padding-left: 9px; border-left: 3px solid var(--blu);
  color: var(--rosso); font-size: 22px; font-weight: 850; line-height: 1.03; letter-spacing: -.012em;
}
.serv__testo p { margin-top: 7px; font-size: 16px; line-height: 1.26; }

/* I lavori */
.cura__riga { margin-top: 20px; }
.cura__anni { display: flex; align-items: center; gap: 12px; }
.cura__numero { color: var(--rosso); font-size: 104px; font-weight: 900; line-height: .84; letter-spacing: -.03em; }
.cura__parole { font-size: 30px; font-weight: 800; line-height: 1.04; letter-spacing: -.015em; }
.cura__parole strong {
  display: table; margin-top: 3px; padding: 2px 12px 4px;
  background: var(--giallo); border-radius: 16px; font-weight: 850;
}
.cura__foto {
  display: flex; gap: 12px;
  margin: 18px -16px 0; padding-inline: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cura__foto::-webkit-scrollbar { display: none; }
.cura__foto img {
  flex: 0 0 82%; min-width: 0;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 18px; scroll-snap-align: start;
}
.cura__nota {
  margin-top: 16px; padding-left: 10px;
  border-left: 3px solid var(--blu);
  font-size: 16px; font-style: italic; line-height: 1.28;
}

/* I passaggi: telefono, sulla strada che scende */
.passaggi, .zona, .servizi, .cura { overflow-x: clip; }
.passaggi__palco { position: relative; margin-top: 22px; }
.passaggi__strada { display: none; }
.passaggi__strada-tel { position: absolute; left: 0; top: 0; width: 76px; height: calc(100% - 118px); overflow: visible; }
.passaggi__strada-tel path { fill: none; vector-effect: non-scaling-stroke; }
.passaggi__strada-tel .asfalto { stroke: var(--blu); stroke-width: 30; }
.passaggi__strada-tel .mezzeria { stroke: var(--bianco); stroke-width: 2.4; stroke-dasharray: 9 9; }
.passi { position: relative; display: grid; gap: 26px; }
.passo { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 0 8px; align-items: start; min-height: 86px; }
.pin {
  position: relative; z-index: 1;
  display: grid; place-items: start center;
  width: 58px; height: 72px; margin: -4px 0 0 6px; padding-top: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 104'%3E%3Cpath fill='%23FD0E21' d='M42 0C18.8 0 0 18.8 0 42c0 29 42 62 42 62s42-33 42-62C84 18.8 65.2 0 42 0z'/%3E%3Ccircle cx='42' cy='42' r='30' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--nero); font-size: 21px; font-weight: 850; line-height: 1.2; letter-spacing: -.01em;
  filter: drop-shadow(0 3px 3px rgba(16, 17, 20, .28));
}
.passo__testo h3 { color: var(--rosso); font-size: 20px; font-weight: 850; line-height: 1.08; letter-spacing: -.012em; }
.passo__testo p { margin-top: 5px; font-size: 16px; line-height: 1.26; }
.passo__img { width: 72px; }
.passaggi__operaio, .passaggi__divano { grid-column: 2 / -1; justify-self: end; margin-top: 4px; }
.passaggi__operaio { width: 132px; }
.passaggi__divano { width: 230px; }
.passaggi__arrivo { position: relative; width: min(100%, 560px); margin: 8px auto 0; }
.arrivo__scena { width: 100%; }
.arrivo__camion {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  clip-path: polygon(3.14% 26.43%, 50.21% 26.43%, 50.86% 29.68%, 51.79% 29.21%, 55.86% 33.08%, 57.57% 36.48%, 58% 38.02%, 61.64% 40.49%, 62.71% 42.04%, 64% 43.59%, 64.14% 46.37%, 65% 54.1%, 65.71% 61.82%, 66.14% 63.37%, 66.14% 70.32%, 66.64% 72.33%, 66.64% 80.68%, 66.07% 81.92%, 60.71% 81.92%, 60% 86.55%, 58.21% 91.19%, 55% 92.43%, 51.79% 91.34%, 50.21% 87.33%, 49.86% 83%, 23% 83%, 23% 84.23%, 22.71% 87.79%, 21.14% 90.88%, 17.86% 92.27%, 14.64% 91.19%, 12.86% 88.1%, 11.43% 85.94%, 11.21% 79.13%, 7.14% 79.13%, 6% 82.23%, 4.43% 82.23%, 4.29% 78.83%, 3% 78.83%, 2.93% 73.57%, 3.14% 70.32%);
  pointer-events: none;
}

/* La zona */
.zona__righe { margin-top: 20px; display: grid; gap: 28px; }
.mappa { position: relative; width: min(100%, 460px); margin-inline: auto; }
.mappa__italia { width: 100%; }
.mappa__tragitti { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mappa__tragitti path { fill: none; stroke-linecap: round; }
.mappa__tragitti .alone { opacity: .78; }
.mappa__tragitti .alone path { stroke: #FFFFFF; stroke-width: 11; }
.mappa__tragitti .tratto { stroke-dasharray: none; }
.mappa__tragitti .linea path { stroke: var(--blu); stroke-width: 6.5; stroke-dasharray: 17 15; }
.citta {
  position: absolute; display: flex; align-items: flex-end;
  font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap;
  transform: translate(-13px, -100%);
}
.citta .ico { width: 26px; height: 40px; margin-bottom: -2px; filter: drop-shadow(0 2px 2px rgba(16, 17, 20, .25)); }
.citta span {
  margin: 0 0 16px 3px; padding: 6px 11px;
  background: var(--bianco); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(16, 17, 20, .2);
}
.citta--milano { left: 26.8%; top: 19%; }
.citta--macerata { left: 59.5%; top: 40%; }
.citta--roma { left: 46.7%; top: 48.9%; }
.citta--roma { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -100%); }
.citta--roma span { margin: 0 3px 16px 0; }
.citta--messina { left: 70.3%; top: 81.4%; }
.mappa__camion { position: absolute; left: -2%; bottom: 0; width: 50%; }
.zona__108 { color: var(--rosso); font-size: 92px; font-weight: 900; line-height: .9; letter-spacing: -.03em; }
.zona__comuni {
  display: inline-block; margin-top: 8px; padding: 6px 18px 8px;
  background: var(--giallo); border-radius: 26px;
  font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -.012em;
}
.zona__frase { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.zona__frase br { display: none; }
.tratte { display: grid; gap: 8px; margin-top: 14px; }
.tratte li {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 16px;
  border: 2px solid #5A7BEA; border-radius: 999px;
  color: var(--blu); font-size: 18px; font-weight: 800;
}
.tratte .ico { width: 16px; height: 24px; }
.zona__domanda { color: var(--rosso); font-size: 32px; font-weight: 850; line-height: 1.05; letter-spacing: -.018em; }
.tempi { display: grid; gap: 12px; margin-top: 14px; }
.tempi li { display: flex; align-items: center; gap: 12px; }
.tempi__ico { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--azzurrino); }
.tempi__ico .ico { font-size: 32px; }
.tempi strong { display: block; font-size: 24px; font-weight: 850; line-height: 1.08; letter-spacing: -.012em; }
.tempi div span { display: block; margin-top: 2px; font-size: 16px; }
.scheda-casa {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 16px;
  background: var(--carta); border-radius: 22px;
}
.scheda-casa .ico { font-size: 40px; }
.scheda-casa h3 { color: var(--rosso); font-size: 20px; font-weight: 850; line-height: 1.1; letter-spacing: -.01em; }
.scheda-casa p { margin-top: 5px; font-size: 16px; line-height: 1.26; }

/* L'invito finale: la fascia gialla */
.invito { background: var(--giallo); overflow: hidden; }
.invito__dentro { padding: 32px 16px 16px; }
.invito__titolo { color: var(--rosso); font-size: clamp(36px, 10.4vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -.022em; }
.invito__numero {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  color: var(--nero); font-size: clamp(36px, 11.2vw, 72px); font-weight: 850; line-height: 1; letter-spacing: -.012em;
  text-decoration: none; white-space: nowrap;
}
.invito__numero .ico { font-size: .86em; --blu: var(--nero); --rosso: var(--nero); --giallo: var(--nero); }
.invito__frase { margin-top: 10px; font-size: 18px; line-height: 1.22; }
.invito__pulsanti { display: grid; gap: 8px; margin-top: 16px; }
.invito__scena { margin-top: 16px; }
.invito__camion { width: min(100%, 460px); margin-inline: auto; }

/* Il piede */
.piede { padding: 26px 16px calc(84px + env(safe-area-inset-bottom, 0px)); background: var(--bianco); }
.piede__riga { display: grid; gap: 12px; justify-items: start; }
.piede__logo img { width: 164px; }
.piede__nome strong { display: block; font-size: 17px; font-weight: 800; }
.piede__nome span { display: block; font-size: 16px; }
.piede__zona { font-size: 16px; }
.piede__tel { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 800; text-decoration: none; }
.piede__tel .ico { font-size: 19px; --blu: var(--rosso); --giallo: var(--rosso); }
.piede__menu { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.piede__menu a { display: inline-block; padding: 7px 0; font-size: 16px; font-weight: 600; text-decoration: none; }
.piede__legale { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; line-height: 1.4; }
.piede__legale a { text-decoration: underline; text-underline-offset: 2px; }
.credit { margin-top: 6px; }

/* Il selettore delle due hero: lo crea main.js, solo sulle anteprime *.pages.dev. Sta nel margine sinistro,
   in verticale, dove non c'è testo; scritto dal basso verso l'alto. */
.anteprima-hero {
  position: fixed; left: 0; top: 50%; z-index: 60;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 1px;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  background: rgba(16, 17, 20, .62); color: var(--bianco);
  border-radius: 8px 0 0 8px;
  font-size: 10px; font-weight: 600; line-height: 1;
  opacity: .8; transition: opacity .2s ease;
}
.anteprima-hero:hover, .anteprima-hero:focus-within { opacity: 1; }
.anteprima-hero span { padding-block: 3px; }
.anteprima-hero button {
  min-height: 40px; padding: 5px 2px;
  background: none; border: 0; border-radius: 6px;
  color: inherit; font: inherit; cursor: pointer;
}
.anteprima-hero button[aria-pressed="true"] { background: var(--giallo); color: var(--nero); font-weight: 800; }

/* Le pagine legali */
.legale { max-width: 820px; margin-inline: auto; padding: 32px 16px 48px; }
.legale h1 { font-size: clamp(32px, 8vw, 48px); font-weight: 850; line-height: 1.06; letter-spacing: -.02em; }
.legale h2 { margin-top: 28px; color: var(--rosso); font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.legale h3 { margin-top: 20px; font-size: 19px; font-weight: 800; }
.legale p, .legale ul, .legale ol { margin-top: 10px; }
.legale ul { list-style: disc; padding-left: 22px; }
.legale ol { list-style: decimal; padding-left: 22px; }
.legale li + li { margin-top: 5px; }
.legale a { color: var(--blu); }
.legale table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; }
.legale th, .legale td { padding: 8px; border: 1px solid var(--linea); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.legale th { background: var(--carta); font-weight: 800; }

/* La 404 */
.pagina-404 { padding: 56px 16px 72px; text-align: center; }
.pagina-404 h1 { color: var(--rosso); font-size: clamp(36px, 9vw, 60px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; }
.pagina-404 p { margin-top: 12px; font-size: 19px; }
.pagina-404__pulsanti { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

/* ── I telefoni più stretti ──────────────────────────────────────────────────────────── */
@media (max-width: 359px) {
  .testata__dentro { gap: 6px; padding-inline: 12px; }
  .testata__logo img { width: 100px; }
  .testata__tel { gap: 4px; height: 40px; padding-inline: 8px; font-size: 14px; }
  .testata__tel .ico { font-size: 15px; }
}

/* Da telefono lo sgombero ha il testo più lungo: titolo accanto al disegno, testo sotto, massimo 3 righe */
@media (max-width: 599px) {
  .serv--e { grid-template-columns: 36% 1fr; grid-template-areas: "img titolo" "corpo corpo"; row-gap: 8px; }
  .serv--e .serv__testo { display: contents; }
  .serv--e .serv__img { grid-area: img; }
  .serv--e .serv__testo h3 { grid-area: titolo; }
  .serv--e .serv__testo p { grid-area: corpo; margin-top: 0; }
}

/* ── Telefono grande e tablet ─────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .hero__testi { padding: 32px 32px 0; }
  .hero__pulsanti, .invito__pulsanti { display: flex; flex-wrap: wrap; }
  .hero__nota { text-align: left; }
  .hero__punti { padding-inline: 24px; }
  .sezione { padding: 56px 32px; }
  .serv { max-width: 640px; margin-inline: auto; }
  .cura__foto { display: grid; grid-template-columns: 1fr 1fr; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .cura__foto img { width: 100%; }
  .zona__righe { grid-template-columns: 1fr 1fr; align-items: start; }
  .mappa { grid-column: 1 / -1; }
  .invito__dentro { padding: 44px 32px 20px; }
  .piede { padding-inline: 32px; }
  .piede__riga { grid-template-columns: repeat(2, auto); justify-content: space-between; align-items: center; }
}

/* ── Da computer: il manifesto, tutto in --u ──────────────────────────────────────────── */
@media (min-width: 980px) {
  :root { --h-testata: calc(100 * var(--u)); }
  body { font-size: calc(24 * var(--u)); line-height: 1.28; }
  .palco { position: relative; width: calc(1440 * var(--u)); margin-inline: auto; }

  .btn {
    gap: calc(10 * var(--u)); min-height: calc(56 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u));
    font-size: calc(23 * var(--u));
  }
  .btn .ico { font-size: calc(27 * var(--u)); }

  /* Testata */
  .testata__dentro {
    max-width: calc(1440 * var(--u)); margin-inline: auto; gap: calc(34 * var(--u));
    padding-inline: calc(44 * var(--u));
  }
  .testata__logo img { width: calc(306 * var(--u)); }
  .testata__apri { display: none; }
  .menu {
    position: static; height: auto; flex-direction: row; gap: calc(40 * var(--u));
    padding: 0; background: none; overflow: visible; visibility: visible; opacity: 1; transition: none;
  }
  .testata .menu, html[data-hero="gialla"] .testata .menu { background: none; }
  .menu a, .menu-aperto .menu a {
    padding: calc(8 * var(--u)) 0; border: 0;
    font-size: calc(25.5 * var(--u)); font-weight: 700; letter-spacing: -.01em;
    opacity: 1; transform: none;
    transition: color .15s ease;
  }
  @media (hover: hover) and (pointer: fine) { .menu a:hover { color: var(--rosso); } }
  html[data-hero="gialla"] .menu a:hover { color: var(--blu); }
  html[data-hero="gialla"] .testata__riga { display: block; width: 1px; height: calc(50 * var(--u)); background: var(--nero); }
  .testata__tel {
    height: calc(54 * var(--u)); gap: calc(10 * var(--u)); padding-inline: calc(20 * var(--u));
    border-radius: calc(12 * var(--u)); font-size: calc(26 * var(--u));
  }
  .testata__tel .ico { font-size: calc(26 * var(--u)); }

  /* Hero */
  .hero { min-height: calc(612 * var(--u)); padding-bottom: calc(26 * var(--u)); }
  .hero__testi {
    width: calc(1440 * var(--u)); margin-inline: auto;
    padding: calc(28 * var(--u)) 0 0 calc(44 * var(--u));
  }
  .hero__occhiello { font-size: calc(28 * var(--u)); letter-spacing: .035em; font-weight: 500; }
  .hero__occhiello::after { width: calc(94 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
  .hero__titolo { margin-top: calc(14 * var(--u)); font-size: calc(100 * var(--u)); line-height: .95; }
  .hero__frase { margin-top: calc(12 * var(--u)); font-size: calc(32 * var(--u)); }
  .hero__evidenza {
    gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u));
    font-size: calc(29 * var(--u));
  }
  .hero__pulsanti { display: flex; gap: calc(9 * var(--u)); margin-top: calc(26 * var(--u)); }
  .hero__nota { width: calc(300 * var(--u)); margin-top: calc(9 * var(--u)); font-size: calc(19 * var(--u)); text-align: center; }
  html[data-hero="chiara"] .hero__scena {
    background-image: url("../img/hero-chiara-1664.webp");
    position: absolute; right: 0; bottom: calc(-6 * var(--u));
    width: calc(1150 * var(--u)); margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%);
    mask-image: linear-gradient(to right, transparent, #000 12%);
  }
  html[data-hero="gialla"] .hero__scena {
    background-image: url("../img/hero-gialla-1664.webp");
    position: absolute; right: calc(83 * var(--u)); bottom: calc(-16 * var(--u));
    width: calc(1150 * var(--u)); margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 97%, transparent), linear-gradient(to top, #000 13%, transparent 13%);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 97%, transparent), linear-gradient(to top, #000 13%, transparent 13%);
  }
  html[data-hero="chiara"] .hero__scena::after { content: none; }
  .etichetta { gap: calc(9 * var(--u)); font-size: calc(26 * var(--u)); }
  .etichetta .ico { width: calc(28 * var(--u)); height: calc(42 * var(--u)); }
  .etichetta--parte { left: 67%; top: 7%; }
  .etichetta--arriva { left: 86%; top: 11.5%; }
  .hero__punti {
    display: flex; width: calc(1440 * var(--u)); margin: calc(20 * var(--u)) auto 0; padding: 0 0 0 calc(44 * var(--u));
  }
  .hero__punti li {
    flex-direction: row; gap: calc(12 * var(--u)); padding-inline: 0 calc(20 * var(--u));
    font-size: calc(18 * var(--u)); text-align: left;
  }
  .hero__punti li + li { padding-left: calc(20 * var(--u)); }
  .hero__punti li:nth-child(1) span { max-width: calc(70 * var(--u)); }
  .hero__punti li:nth-child(2) span { max-width: calc(112 * var(--u)); }
  .hero__punti li:nth-child(3) span { max-width: calc(128 * var(--u)); }
  .hero__punti .ico { font-size: calc(46 * var(--u)); }
  html[data-hero="chiara"] .hero::after {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(84 * var(--u));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }

  /* La gialla */
  html[data-hero="gialla"] .hero { min-height: calc(680 * var(--u)); padding-bottom: 0; }
  html[data-hero="gialla"] .hero__testi { padding-top: calc(36 * var(--u)); }
  html[data-hero="gialla"] .hero__pulsanti .btn { padding-inline: calc(20 * var(--u)); font-size: calc(22 * var(--u)); }
  html[data-hero="gialla"] .hero__occhiello { font-size: calc(27 * var(--u)); }
  html[data-hero="gialla"] .hero__titolo { margin-top: calc(6 * var(--u)); font-size: calc(104 * var(--u)); }
  html[data-hero="gialla"] .hero__evidenza { gap: calc(12 * var(--u)); margin-top: calc(18 * var(--u)); padding: calc(10 * var(--u)) calc(24 * var(--u)); font-size: calc(26 * var(--u)); }
  html[data-hero="gialla"] .hero__evidenza .ico { font-size: calc(32 * var(--u)); }
  html[data-hero="gialla"] .etichetta { gap: calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u)); font-size: calc(23 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(16, 17, 20, .22); }
  html[data-hero="gialla"] .etichetta .ico { width: calc(22 * var(--u)); height: calc(33 * var(--u)); }
  html[data-hero="gialla"] .etichetta--parte { left: 84%; top: 4%; }
  html[data-hero="gialla"] .etichetta--arriva { left: 78%; top: 60.5%; }

  /* Chiama e WhatsApp: due cerchi nella hero, poi piccoli nell'angolo */
  .azioni {
    position: absolute; left: auto; right: calc(20 * var(--u)); bottom: auto; top: calc(468 * var(--u));
    display: flex; flex-direction: column; gap: calc(10 * var(--u));
    padding: 0; background: none; box-shadow: none;
    z-index: 3;
  }
  .azione {
    flex-direction: column; gap: calc(3 * var(--u));
    width: calc(104 * var(--u)); height: calc(104 * var(--u)); min-height: 0;
    border-radius: 50%; font-size: calc(17 * var(--u));
    box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(16, 17, 20, .22);
  }
  .azione .ico { font-size: calc(36 * var(--u)); }
  @media (hover: hover) and (pointer: fine) {
    .azione--rossa:hover { background: #D90A1B; }
    .azione--blu:hover { background: #000093; }
  }
  html[data-hero="gialla"] .azioni { top: calc(536 * var(--u)); }
  .azioni--fuori, html[data-hero="gialla"] .azioni--fuori { position: fixed; top: auto; right: 18px; bottom: 18px; z-index: 30; gap: 8px; transition: transform .3s var(--ease-out); }
  .azioni--fuori.azioni--sopra-piede { transform: translateY(calc(-1 * var(--alza-piede, 140px))); }
  .azioni--fuori .azione { width: 60px; height: 60px; box-shadow: 0 6px 14px rgba(16, 17, 20, .24); }
  .azioni--fuori .azione .ico { font-size: 28px; }
  .azioni--fuori .azione span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Sezioni */
  .sezione { padding: calc(46 * var(--u)) 0 calc(40 * var(--u)); }
  .titolo {
    width: calc(1440 * var(--u)); margin-inline: auto; padding-left: calc(44 * var(--u));
    font-size: calc(62 * var(--u)); letter-spacing: -.016em;
  }
  .titolo span { display: inline; }
  .titolo::after { width: calc(94 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }

  /* Servizi: il palco col tragitto */
  .servizi { padding-top: calc(60 * var(--u)); }
  .servizi__palco { height: calc(945 * var(--u)); margin-top: calc(22 * var(--u)); }
  .servizi__tragitti { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .servizi__tragitti path { fill: none; stroke: var(--blu); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 9 9; }
  .servizi__tragitti circle { fill: var(--blu); }
  .serv {
    position: absolute; display: flex; align-items: flex-start; gap: 0; padding: 0; margin: 0; max-width: none;
  }
  .serv:nth-child(odd) { display: flex; }
  .serv:nth-child(odd) .serv__img { order: 0; }
  .serv__tragitto { display: none; }
  .serv__img { flex: none; max-height: none; }
  .serv__testo { flex: none; }
  .serv__testo h3 { padding-left: calc(22 * var(--u)); border-left-width: calc(3 * var(--u)); font-size: calc(43 * var(--u)); line-height: 1.02; }
  .serv__testo p { margin-top: calc(14 * var(--u)); padding-left: calc(25 * var(--u)); font-size: calc(26.5 * var(--u)); line-height: 1.28; }
  .serv--a { left: calc(14 * var(--u)); top: 0; }
  .serv--a .serv__img { width: calc(426 * var(--u)); }
  .serv--a .serv__testo { width: calc(320 * var(--u)); margin: calc(14 * var(--u)) 0 0 calc(28 * var(--u)); }
  .serv--b { left: calc(810 * var(--u)); top: calc(78 * var(--u)); }
  .serv--b .serv__img { width: calc(300 * var(--u)); }
  .serv--b .serv__testo { width: calc(276 * var(--u)); margin: calc(0 * var(--u)) 0 0 calc(22 * var(--u)); }
  .serv--c { left: calc(150 * var(--u)); top: calc(350 * var(--u)); }
  .serv--c .serv__img { width: calc(216 * var(--u)); }
  .serv--c .serv__testo { width: calc(292 * var(--u)); margin: calc(22 * var(--u)) 0 0 calc(30 * var(--u)); }
  .serv--d { left: calc(822 * var(--u)); top: calc(334 * var(--u)); }
  .serv--d .serv__img { width: calc(230 * var(--u)); }
  .serv--d .serv__testo { width: calc(250 * var(--u)); margin: calc(48 * var(--u)) 0 0 calc(42 * var(--u)); }
  .serv--d .serv__testo p { max-width: calc(190 * var(--u)); }
  .serv--e { left: calc(230 * var(--u)); top: calc(585 * var(--u)); }
  .serv--e .serv__img { width: calc(280 * var(--u)); }
  .serv--e .serv__testo { width: calc(430 * var(--u)); margin: calc(62 * var(--u)) 0 0 calc(70 * var(--u)); }
  .serv--e .serv__testo h3 { max-width: calc(320 * var(--u)); }
  .serv--e .serv__testo p { max-width: calc(405 * var(--u)); }

  /* I lavori */
  .cura__riga {
    display: grid; grid-template-columns: calc(272 * var(--u)) 1fr; gap: calc(14 * var(--u));
    width: calc(1440 * var(--u)); margin: calc(22 * var(--u)) auto 0; padding-inline: calc(44 * var(--u));
    align-items: center;
  }
  .cura__anni { display: block; }
  .cura__numero { font-size: calc(200 * var(--u)); line-height: .8; }
  .cura__parole { margin-top: calc(20 * var(--u)); font-size: calc(56 * var(--u)); line-height: 1; }
  .cura__parole strong { margin: calc(4 * var(--u)) 0 0 calc(-12 * var(--u)); padding: calc(3 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)); border-radius: calc(32 * var(--u)); font-size: calc(57 * var(--u)); }
  .cura__foto { display: grid; grid-template-columns: 510fr 541fr; gap: calc(26 * var(--u)); margin: 0; padding: 0; overflow: visible; }
  .cura__foto img { width: 100%; height: calc(320 * var(--u)); aspect-ratio: auto; border-radius: calc(26 * var(--u)); }
  .cura__nota {
    width: max-content; max-width: calc(1352 * var(--u));
    margin: calc(24 * var(--u)) auto 0; padding-left: calc(14 * var(--u));
    border-left-width: calc(3 * var(--u)); font-size: calc(28.5 * var(--u));
  }

  /* I passaggi: la strada blu del kit, coi segnaposto sopra */
  .passaggi__palco { height: calc(836 * var(--u)); margin-top: 0; }
  .passaggi__strada {
    display: block; position: absolute;
    left: calc(52 * var(--u)); top: calc(146 * var(--u)); width: calc(1018 * var(--u));
  }
  .passaggi__strada-tel { display: none; }
  .passi { position: static; display: block; }
  .passo { position: static; display: block; min-height: 0; }
  .pin {
    position: absolute; z-index: 2;
    width: calc(84 * var(--u)); height: calc(104 * var(--u)); padding-top: calc(19 * var(--u));
    margin: calc(-104 * var(--u)) 0 0 calc(-42 * var(--u));
    font-size: calc(30 * var(--u));
  }
  .passo__testo { position: absolute; z-index: 2; }
  .passo__testo h3 { font-size: calc(37 * var(--u)); line-height: 1.05; white-space: nowrap; }
  .passo__testo p { margin-top: calc(8 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.26; }
  .passo__img { position: absolute; display: none; }
  .passaggi__operaio {
    position: absolute; margin: 0; z-index: 1;
    left: calc(590 * var(--u)); top: calc(30 * var(--u)); width: calc(192 * var(--u));
  }
  .passaggi__divano {
    position: absolute; margin: 0; z-index: 1;
    left: calc(298 * var(--u)); top: calc(466 * var(--u)); width: calc(258 * var(--u));
  }
  .passaggi__arrivo {
    position: absolute; margin: 0; z-index: 1;
    overflow: visible;
    left: calc(704 * var(--u)); top: calc(402 * var(--u)); width: calc(700 * var(--u));
  }
  .passo--1 .pin { left: calc(431 * var(--u)); top: calc(246 * var(--u)); }
  .passo--1 .passo__testo { left: calc(64 * var(--u)); top: calc(34 * var(--u)); width: calc(470 * var(--u)); }
  .passo--2 .pin { left: calc(833 * var(--u)); top: calc(288 * var(--u)); }
  .passo--2 .passo__testo { left: calc(985 * var(--u)); top: calc(136 * var(--u)); width: calc(420 * var(--u)); }
  .passo--2 .passo__testo p { max-width: calc(320 * var(--u)); }
  .passo--3 .pin { left: calc(551 * var(--u)); top: calc(428 * var(--u)); }
  .passo--3 .passo__testo { left: calc(80 * var(--u)); top: calc(284 * var(--u)); width: calc(420 * var(--u)); }
  .passo--3 .passo__testo p { max-width: calc(330 * var(--u)); }
  .passo--4 .pin { left: calc(246 * var(--u)); top: calc(616 * var(--u)); }
  .passo--4 .passo__testo { left: calc(64 * var(--u)); top: calc(686 * var(--u)); width: calc(420 * var(--u)); }
  .passo--4 .passo__img { display: block; left: calc(492 * var(--u)); top: calc(704 * var(--u)); width: calc(150 * var(--u)); }
  .passo--5 .pin { left: calc(612 * var(--u)); top: calc(660 * var(--u)); }
  .passo--5 .passo__testo { left: calc(985 * var(--u)); top: calc(314 * var(--u)); width: calc(420 * var(--u)); }

  /* La zona: tre colonne con le righe */
  .zona__righe {
    display: grid; grid-template-columns: calc(586 * var(--u)) calc(360 * var(--u)) 1fr; gap: 0;
    width: calc(1440 * var(--u)); margin: calc(14 * var(--u)) auto 0; padding: 0 calc(24 * var(--u)) 0 calc(44 * var(--u));
    align-items: stretch;
  }
  .mappa { grid-column: auto; position: relative; width: calc(486 * var(--u)); margin: 0 0 0 calc(30 * var(--u)); }
  .citta { font-size: calc(23 * var(--u)); transform: translate(calc(-17 * var(--u)), -100%); }
  .citta .ico { width: calc(34 * var(--u)); height: calc(52 * var(--u)); margin-bottom: calc(-2 * var(--u)); }
  .citta span { margin: 0 0 calc(20 * var(--u)) calc(5 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(16, 17, 20, .2); }
  .citta--roma { transform: translate(calc(-100% + 17 * var(--u)), -100%); }
  .citta--roma span { margin: 0 calc(5 * var(--u)) calc(20 * var(--u)) 0; }
  .mappa__camion { left: calc(-58 * var(--u)); bottom: calc(-4 * var(--u)); width: calc(280 * var(--u)); }
  .zona__numeri { display: flex; flex-direction: column; align-items: flex-start; padding: 0 calc(26 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u)); border-left: 1px solid var(--linea); }
  .zona__108 { font-size: calc(126 * var(--u)); line-height: .86; }
  .zona__comuni { margin-top: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u)); border-radius: calc(36 * var(--u)); font-size: calc(37 * var(--u)); }
  .zona__frase { margin-top: calc(16 * var(--u)); font-size: calc(29 * var(--u)); line-height: 1.26; }
  .zona__frase br { display: inline; }
  .tratte { align-self: stretch; gap: calc(12 * var(--u)); margin-top: auto; padding-top: calc(20 * var(--u)); }
  .tratte li { gap: calc(10 * var(--u)); min-height: calc(52 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); border-width: calc(2 * var(--u)); font-size: calc(26 * var(--u)); }
  .tratte .ico { width: calc(20 * var(--u)); height: calc(30 * var(--u)); }
  .zona__tempi { display: flex; flex-direction: column; padding: 0 0 calc(30 * var(--u)) calc(28 * var(--u)); border-left: 1px solid var(--linea); }
  .zona__domanda { font-size: calc(49 * var(--u)); }
  .tempi { gap: calc(16 * var(--u)); margin-top: calc(18 * var(--u)); }
  .tempi li { gap: calc(20 * var(--u)); }
  .tempi__ico { width: calc(88 * var(--u)); height: calc(88 * var(--u)); }
  .tempi__ico .ico { font-size: calc(48 * var(--u)); }
  .tempi strong { font-size: calc(38 * var(--u)); }
  .tempi div span { margin-top: calc(4 * var(--u)); font-size: calc(26 * var(--u)); }
  .scheda-casa { gap: calc(12 * var(--u)); margin-top: auto; padding: calc(20 * var(--u)) calc(16 * var(--u)); border-radius: calc(30 * var(--u)); }
  .scheda-casa .ico { font-size: calc(52 * var(--u)); }
  .scheda-casa h3 { font-size: calc(29 * var(--u)); white-space: nowrap; }
  .scheda-casa p { margin-top: calc(8 * var(--u)); font-size: calc(27 * var(--u)); line-height: 1.22; }

  /* L'invito */
  .invito__dentro {
    position: relative; display: block; min-height: calc(350 * var(--u));
    width: calc(1440 * var(--u)); margin-inline: auto; padding: calc(24 * var(--u)) 0 calc(22 * var(--u)) calc(64 * var(--u));
  }
  .invito__titolo { max-width: calc(760 * var(--u)); font-size: calc(74 * var(--u)); line-height: .98; letter-spacing: -.012em; }
  .invito__numero { gap: calc(18 * var(--u)); margin: calc(10 * var(--u)) 0 0 calc(26 * var(--u)); font-size: calc(80 * var(--u)); }
  .invito__numero .ico { font-size: calc(62 * var(--u)); }
  .invito__frase { margin: calc(8 * var(--u)) 0 0 calc(20 * var(--u)); font-size: calc(28.5 * var(--u)); }
  .invito__pulsanti { gap: calc(26 * var(--u)); margin-top: calc(14 * var(--u)); }
  .invito__pulsanti .btn { min-height: calc(56 * var(--u)); padding-inline: calc(46 * var(--u)); font-size: calc(25 * var(--u)); }
  .invito__scena { position: absolute; right: calc(80 * var(--u)); bottom: calc(10 * var(--u)); width: calc(600 * var(--u)); margin: 0; }
  .invito__camion { width: 100%; margin: 0; }

  /* Il piede */
  .piede { padding: 0 0 calc(16 * var(--u)); }
  .piede__riga {
    display: flex; align-items: center; justify-content: space-between;
    width: calc(1440 * var(--u)); margin-inline: auto; padding: calc(14 * var(--u)) calc(44 * var(--u));
  }
  .piede__riga > * + *:not(.piede__menu) { padding-left: calc(30 * var(--u)); border-left: 1px solid var(--linea); }
  .piede__logo img { width: calc(172 * var(--u)); }
  .piede__nome strong { font-size: calc(21 * var(--u)); line-height: 1.2; }
  .piede__nome span { font-size: calc(19 * var(--u)); line-height: 1.2; }
  .piede__zona { display: flex; align-items: center; min-height: calc(44 * var(--u)); font-size: calc(19 * var(--u)); }
  .piede__tel { gap: calc(8 * var(--u)); min-height: calc(44 * var(--u)); font-size: calc(23 * var(--u)); }
  .piede__tel .ico { font-size: calc(22 * var(--u)); }
  .piede__menu { flex-wrap: nowrap; gap: calc(30 * var(--u)); padding-left: calc(30 * var(--u)); border-left: 1px solid var(--linea); }
  .piede__menu a { padding: calc(10 * var(--u)) 0; font-size: calc(19 * var(--u)); }
  @media (hover: hover) and (pointer: fine) { .piede__menu a:hover, .piede__tel:hover { color: var(--rosso); } }
  .piede__legale {
    display: flex; justify-content: space-between; gap: calc(24 * var(--u));
    width: calc(1352 * var(--u)); margin: 0 auto; padding-top: calc(10 * var(--u)); font-size: calc(16 * var(--u));
  }
  .credit { margin: 0; }

  .anteprima-hero { font-size: 11px; padding: 8px 3px; }
  .anteprima-hero button { padding: 6px 3px; }

  .legale { padding: calc(56 * var(--u)) calc(44 * var(--u)) calc(72 * var(--u)); font-size: 18px; }
  .pagina-404 { padding-block: calc(96 * var(--u)) calc(120 * var(--u)); }
}


/* ════════════════════════════════════════════════════════════════════════════════════════
   IL MOVIMENTO (step 5-bis). Solo transform e opacity; le curve sono --ease-out (entrate) e
   --ease-in-out (cose che si spostano sullo schermo). Il JavaScript aggiunge .in una volta sola.
   ════════════════════════════════════════════════════════════════════════════════════════ */
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes assesta { from { transform: scale(1.045); } to { transform: none; } }
@keyframes cade {
  0% { opacity: 0; transform: translateY(-46px); }
  55% { opacity: 1; transform: translateY(0); }
  74% { transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ondeggia { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* La prima schermata entra subito, col CSS: il testo non aspetta il JavaScript e l'immagine non parte mai invisibile */
.hero__occhiello, .hero__titolo, .hero__titolo span, .hero__frase, .hero__evidenza, .hero__pulsanti, .hero__nota, .hero__punti li {
  animation: entra .75s var(--ease-out) both;
}
.hero__titolo { animation-delay: .05s; }
.hero__titolo span { animation-delay: .13s; }
.hero__frase { animation-delay: .19s; }
.hero__evidenza { animation-delay: .25s; }
.hero__pulsanti { animation-delay: .31s; }
.hero__nota { animation-delay: .37s; }
.hero__punti li:nth-child(1) { animation-delay: .43s; }
.hero__punti li:nth-child(2) { animation-delay: .49s; }
.hero__punti li:nth-child(3) { animation-delay: .55s; }
.hero__scena { animation: assesta 1.6s var(--ease-out) both; transform-origin: 70% 62%; }
.etichetta { animation: cade .9s var(--ease-out) .6s both; }
.etichetta--arriva { animation-delay: .82s; }
.etichetta .ico { animation: ondeggia 2.4s var(--ease-in-out) 1.9s infinite alternate; }

/* Le parti che entrano mentre si scorre */
html.con-js .reveal { opacity: 0; transform: translateY(32px); }
html.con-js .reveal--zoom { transform: translateY(24px) scale(.95); }
html.con-js .reveal--sx { transform: translateX(-56px); }
html.con-js .reveal--dx { transform: translateX(56px); }
html.con-js .reveal--retro { transform: translateX(26%); }
html.con-js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out) var(--dopo, 0s), transform .8s var(--ease-out) var(--dopo, 0s), scale .3s ease;
}
html.con-js .reveal--retro.in { transition: opacity .5s ease var(--dopo, 0s), transform 1.3s var(--ease-in-out) var(--dopo, 0s); }
.serv__testo.reveal { --dopo: .12s; }
.cura__foto img:nth-child(1) { --dopo: .08s; }
.cura__foto img:nth-child(2) { --dopo: .18s; }
.passo__img.reveal { --dopo: .14s; }
.tratte li:nth-child(2) { --dopo: .08s; }
.tratte li:nth-child(3) { --dopo: .16s; }
.tempi li:nth-child(2) { --dopo: .1s; }
.invito__numero.reveal { --dopo: .08s; }
.invito__frase.reveal { --dopo: .14s; }
.invito__pulsanti.reveal { --dopo: .2s; }

/* Le immagini si ingrandiscono appena col mouse */
@media (hover: hover) and (pointer: fine) {
  .serv:hover .serv__img { scale: 1.04; }
  .cura__foto img:hover { scale: 1.03; }
  .serv__img, .cura__foto img { transition: scale .3s ease; }
}

/* I segnaposto che cadono al loro posto, sulla strada dei passaggi */
html.con-js [data-reveal="cade"] { opacity: 0; }
html.con-js [data-reveal="cade"].in { opacity: 1; animation: cade .85s var(--ease-out) var(--dopo, 0s) both; }
.passo--2 .pin { --dopo: .06s; }
.passo--3 .pin { --dopo: .12s; }
.passo--4 .pin { --dopo: .18s; }
.passo--5 .pin { --dopo: .24s; }

/* I tragitti tratteggiati, trattino dopo trattino */
html.con-js .spezzata .traccia-guida { visibility: hidden; }
html.con-js .spezzata .tratto { opacity: 0; transition: opacity .2s ease; }
html.con-js .spezzata .tratto.vista,
html.con-js .in .spezzata .tratto,
html.con-js .spezzata.in .tratto { opacity: 1; }

/* Il camion che arriva alla casa nuova: entra lungo la strada, poi compare la casa */
html.con-js [data-reveal="arrivo"] .arrivo__scena { opacity: 0; }
html.con-js [data-reveal="arrivo"] .arrivo__camion { opacity: 0; transform: translateX(-38%); }
html.con-js [data-reveal="arrivo"].in .arrivo__scena { opacity: 1; transition: opacity .55s ease 1.05s; }
html.con-js [data-reveal="arrivo"].in .arrivo__camion { opacity: 1; transform: none; transition: opacity .45s ease, transform 1.4s var(--ease-in-out); }

/* La cartina: prima l'Italia, poi i tragitti da Messina, e ogni città quando il suo tragitto arriva */
html.con-js [data-reveal="mappa"] .mappa__italia { opacity: 0; transform: scale(.96); }
html.con-js [data-reveal="mappa"].in .mappa__italia { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
html.con-js [data-reveal="mappa"] .citta .ico,
html.con-js [data-reveal="mappa"] .citta span { opacity: 0; }
html.con-js [data-reveal="mappa"].in .citta .ico { opacity: 1; animation: cade .8s var(--ease-out) var(--dopo, .25s) both; }
html.con-js [data-reveal="mappa"].in .citta span { opacity: 1; animation: entra .6s var(--ease-out) calc(var(--dopo, .25s) + .2s) both; }
.citta--messina { --dopo: .15s; }
html.con-js [data-reveal="mappa"] .mappa__camion { opacity: 0; transform: translateX(-60px); }
html.con-js [data-reveal="mappa"].in .mappa__camion { opacity: 1; transform: none; transition: opacity .6s ease .3s, transform 1.2s var(--ease-in-out) .3s; }

/* Meno movimento, non zero: restano le dissolvenze, spariscono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  .hero__occhiello, .hero__titolo, .hero__titolo span, .hero__frase, .hero__evidenza, .hero__pulsanti, .hero__nota, .hero__punti li,
  .etichetta { animation-name: appare; animation-duration: .5s; }
  .hero__scena, .etichetta .ico { animation: none; }
  html.con-js .reveal, html.con-js .reveal--zoom, html.con-js .reveal--sx, html.con-js .reveal--dx, html.con-js .reveal--retro { transform: none; }
  html.con-js .reveal.in, html.con-js .reveal--retro.in { transition: opacity .5s ease; }
  html.con-js [data-reveal="cade"].in, html.con-js [data-reveal="mappa"].in .citta .ico, html.con-js [data-reveal="mappa"].in .citta span { animation: appare .5s ease both; }
  html.con-js [data-reveal="arrivo"] .arrivo__camion { display: none; }
  html.con-js [data-reveal="arrivo"].in .arrivo__scena { transition: opacity .5s ease; }
  html.con-js [data-reveal="mappa"] .mappa__italia, html.con-js [data-reveal="mappa"] .mappa__camion { transform: none; }
  html.con-js [data-reveal="mappa"].in .mappa__italia, html.con-js [data-reveal="mappa"].in .mappa__camion { transition: opacity .5s ease; }
  html.con-js [data-reveal="traccia"]:not(.in), html.con-js [data-reveal="traccia-scorre"]:not(.in), html.con-js [data-reveal="mappa"]:not(.in) .mappa__tragitti { opacity: 0; }
  html.con-js [data-reveal="traccia"], html.con-js [data-reveal="traccia-scorre"], html.con-js .mappa__tragitti { transition: opacity .6s ease; }
  .btn, .azione, .testata__tel, .menu a { transition-property: background-color, box-shadow, opacity; }
  .btn:active, .azione:active, .testata__tel:active { transform: none; }
  .menu a { transform: none; }
  .azioni--fuori, html[data-hero="gialla"] .azioni--fuori { transition: none; }
}