/* Punto Affari — step 6-quater, il salto di livello.
   Stessi colori del marchio (misurati sul design), stesso Montserrat servito dal sito, stesso kit.
   Il sistema: titoli grandi e stretti, tanto spazio, tessere senza bordino, fondi bianchi,
   un solo gesto di marca (la banda gialla inclinata del logo). */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --giallo: #FCDE00;
  --rosso: #E3010A;
  --nero: #111111;
  --testo-2: #494B4A;
  --testo-3: #6B6A6C;
  --bianco: #FFFFFF;
  --fondo-chiaro: #F8F8F6;
  --fondo-banda: #F3F3EF;
  --fondo-scheda: #F5F4F1;
  --linea: #EAE9E6;
  --muro: #E8E8EA;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --contenuto: 1320px;
  --margine: clamp(20px, 4.45vw, 64px);
  --gronda: max(var(--margine), calc((100vw - var(--contenuto)) / 2));
  --testata: 88px;
  --spazio: clamp(76px, 8.6vw, 128px);
  --raggio-s: 14px;
  --raggio: 20px;
  --raggio-l: 28px;
  --ombra: 0 1px 2px rgba(17, 17, 17, .05), 0 6px 18px rgba(17, 17, 17, .06);
  --ombra-alta: 0 2px 6px rgba(17, 17, 17, .05), 0 24px 60px rgba(17, 17, 17, .12);
  --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%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata) + 20px);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--nero);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, .btn, .menu__voce, .freccia {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:focus-visible { outline: 3px solid var(--nero); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.contenitore {
  width: 100%;
  max-width: calc(var(--contenuto) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--giallo); color: var(--nero); padding: 10px 16px; border-radius: 6px;
  font-weight: 700; text-decoration: none;
}
.salta:focus { top: 12px; }

/* icone del kit: SVG a un colore, colorate dal testo */
.ico {
  display: inline-block;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.ico--rosso { color: var(--rosso); }

/* pulsanti */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  color: var(--nero);
  transition: box-shadow .2s ease, background-color .2s ease, scale .12s var(--ease-out);
}
.btn .ico { width: 22px; height: 22px; }
.btn--giallo { background: var(--giallo); }
.btn--bordo { background: var(--bianco); box-shadow: inset 0 0 0 1.5px var(--nero); }
.btn--largo { width: 100%; }
.btn:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .btn--giallo:hover { box-shadow: 0 10px 28px rgba(252, 222, 0, .5); }
  .btn--bordo:hover { box-shadow: inset 0 0 0 2px var(--nero), 0 8px 22px rgba(17, 17, 17, .08); }
}

/* frecce rotonde */
.freccia {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bianco);
  box-shadow: inset 0 0 0 1.5px var(--nero);
  color: var(--nero);
  transition: box-shadow .2s ease, background-color .2s ease, opacity .2s ease, scale .12s var(--ease-out);
}
.freccia .ico { width: 16px; height: 16px; }
.freccia:active { scale: .94; }
.freccia[disabled] { opacity: .25; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .freccia:not([disabled]):hover { background: var(--giallo); }
}

/* il gesto di marca: la banda inclinata del logo, sopra i titoli */
.titolo::before,
.esperienza__titolo::before,
.provenienza__titolo::before {
  content: "";
  display: block;
  width: 44px;
  height: 9px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  background: var(--giallo);
  transform: skewX(-22deg);
  transform-origin: left bottom;
}

/* titoli di sezione */
.sezione { padding-block: var(--spazio); }
.sezione--chiara { background: var(--fondo-chiaro); }
.offerte.sezione--chiara, .reparti.sezione--chiara { background: var(--bianco); }
/* due sezioni bianche di seguito: lo spazio non raddoppia */
.offerte + .volantino-sez, .volantino-sez + .domande { padding-top: 0; }
.titolo {
  font-weight: 800;
  font-size: clamp(32px, 4.45vw, 64px);
  line-height: 1.03;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.sottotitolo {
  margin-top: clamp(14px, 1.5vw, 20px);
  max-width: 40em;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.5;
  color: var(--testo-2);
  text-wrap: pretty;
}
.sezione__testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

/* ───────── TESTATA ───────── */
.testata {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bianco);
  transition: box-shadow .25s ease;
}
.testata.scorsa { box-shadow: 0 1px 0 var(--linea), 0 10px 30px rgba(17, 17, 17, .05); }
.testata__riga {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--testata);
}
/* la linguetta del logo: pende dalla testata come un'insegna */
.testata__logo {
  flex: none;
  align-self: flex-start;
  position: relative;
  z-index: 2;
  display: block;
  padding: 8px 18px 14px;
  margin-left: -18px;
  border-radius: 0 0 18px 18px;
  background: var(--bianco);
  box-shadow: 0 14px 28px rgba(17, 17, 17, .07);
  transform-origin: left top;
  transition: transform .28s var(--ease-out), box-shadow .25s ease;
}
.testata__logo img { width: auto; height: 124px; }
.testata.scorsa .testata__logo { transform: scale(.56); box-shadow: 0 0 0 rgba(17, 17, 17, 0); }
.menu { flex: 1; display: flex; justify-content: center; }
.menu__lista { display: flex; gap: clamp(24px, 3.4vw, 52px); }
.menu__voce {
  position: relative;
  display: inline-block;
  padding: 10px 2px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
}
.menu__voce::after {
  content: "";
  position: absolute; left: 2px; right: 2px; bottom: 4px;
  height: 3px;
  background: var(--giallo);
  transform: scaleX(0) skewX(-22deg);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu__voce:hover::after { transform: scaleX(1) skewX(-22deg); }
}
.menu__voce[aria-current] { font-weight: 800; }
.menu__voce[aria-current]::after { transform: scaleX(1) skewX(-22deg); }
.testata__trovaci {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--linea);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow .2s ease, scale .12s var(--ease-out);
}
.testata__trovaci:active { scale: .97; }
.testata__trovaci .ico { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .testata__trovaci:hover { box-shadow: inset 0 0 0 1.5px var(--nero); }
}
.testata__menu { display: none; }

/* ───────── AVVISO D'APERTURA: un'etichetta sopra la hero ───────── */
.avviso {
  position: absolute;
  z-index: 6;
  top: calc(var(--testata) + 14px);
  left: 0;
  right: 0;
  pointer-events: none;
}
.avviso__testo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100vw - 2 * var(--margine));
  margin-inline: auto;
  padding: 7px 18px 7px 14px;
  border-radius: 999px;
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: auto;
}
.avviso__punto {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rosso);
  flex: none;
}

/* ───────── HERO: il palco ─────────
   La scena è costruita a livelli coi pezzi del kit (fondale coi podi vuoti + oggetti scontornati + cartellino).
   --S è la larghezza della scena, --u un centesimo di --S: la scena e i testi crescono insieme e stanno
   sempre in una schermata, pulsante compreso. Le coordinate degli oggetti sono in % del fondale. */
.hero { position: relative; overflow: hidden; background: var(--bianco); }
.hero__scena {
  --H: clamp(600px, calc(100svh - var(--testata)), 62vw);
  --S: min(100vw, calc(var(--H) * 1.9));
  --u: calc(var(--S) / 100);
  position: relative;
  isolation: isolate;
  height: var(--H);
}
.hero__palco {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--S);
  aspect-ratio: 1672 / 941;
  margin-left: calc(var(--S) / -2);
}
.hero__fondo { position: relative; z-index: 0; width: 100%; }
/* a schermi molto larghi il fondale continua a specchio sui lati */
.hero__palco::before, .hero__palco::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: url("/assets/img/hero/fondale-podi.webp") 0 0 / 100% 100% no-repeat;
  transform: scaleX(-1);
}
.hero__palco::before { right: 100%; }
.hero__palco::after { left: 100%; }
/* il muro sfuma nel bianco in alto, il pavimento in basso: la scena non è un rettangolo incollato alla pagina */
.hero__velo {
  position: absolute;
  z-index: 1;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: calc(var(--u) * -8);
  bottom: 0;
  background:
    linear-gradient(to bottom, #fff 0, #fff 22%, rgba(255, 255, 255, .55) 40%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(to top, #fff 0, rgba(255, 255, 255, .92) 9%, rgba(255, 255, 255, 0) 19%);
  pointer-events: none;
}
.hero__oggetti { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.og {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  will-change: transform;
}
.og img { width: 100%; }
/* l'ombra d'appoggio sul podio */
.og--appoggiato::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: var(--ob, -3%);
  width: var(--ol, 104%);
  height: var(--oh, 11%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 40, 50, .34), rgba(40, 40, 50, 0));
  transform: translateX(-50%);
}
/* gli oggetti, dal fondo in avanti (x, y, larghezza in % del fondale) */
.og--pianta       { --x: 33.4%; --y: 52.6%; --w: 6.8%;  --ob: -1%; --ol: 56%; --oh: 8%; }
.og--flaconi      { --x: 83.8%; --y: 37.6%; --w: 14.6%; --ob: -2%; --ol: 100%; --oh: 12%; }
.og--manubri      { --x: 66.2%; --y: 36%;   --w: 10.4%; }
.og--trapano      { --x: 82.4%; --y: 25%;   --w: 12.4%; }
.og--cuffie       { --x: 21.2%; --y: 34.8%; --w: 10.2%; }
.og--orsetto      { --x: 31.2%; --y: 37.4%; --w: 8.8%;  --ob: -2%; --ol: 84%; --oh: 9%; }
.og--scarpa       { --x: 35.6%; --y: 65.4%; --w: 12%; }
.og--sedia        { --x: 79.4%; --y: 49%;   --w: 13%;   --ob: -2%; --ol: 90%; --oh: 8%; }
.og--tavolo       { --x: 88.4%; --y: 54.6%; --w: 15%;   --ob: -2%; --ol: 86%; --oh: 8%; }
.og--aspirapolvere{ --x: 72.4%; --y: 43.2%; --w: 9%;    --ob: -1%; --ol: 130%; --oh: 5%; }
.og--pentole      { --x: 45.4%; --y: 54.4%; --w: 26%;   --ob: 1%;  --ol: 96%; --oh: 12%; }
.og--friggitrice  { --x: 21.4%; --y: 52.8%; --w: 14.4%; --ob: -2%; --ol: 92%; --oh: 11%; }
.og--lavatrice    { --x: -1%;   --y: 33%;   --w: 22.6%; --ob: -2%; --ol: 100%; --oh: 8%; }

/* il cartellino (kit), al centro della scena */
.hero__etichetta {
  position: absolute;
  z-index: 3;
  left: 38.6%;
  top: 34.2%;
  width: 25.4%;
  aspect-ratio: 900 / 675;
  pointer-events: none;
  will-change: transform;
}
.hero__oscilla { position: absolute; inset: 0; transform-origin: 68% 3%; }
.hero__cartellino { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -2deg; filter: drop-shadow(0 22px 26px rgba(120, 0, 0, .2)); }
.hero__luce {
  position: absolute;
  inset: 0;
  rotate: -2deg;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url("/assets/img/hero/cartellino-offerta-v2.webp") center / 100% 100% no-repeat;
  mask: url("/assets/img/hero/cartellino-offerta-v2.webp") center / 100% 100% no-repeat;
}
.hero__luce::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-18deg);
}

/* i testi: il titolo in alto, sul muro; sul pavimento i due testi ai lati e il pulsante in mezzo */
.hero__testi { display: contents; }
.hero__titolo {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 37.6);
  text-align: center;
  font-weight: 800;
  font-size: calc(var(--u) * 5);
  line-height: 1.04;
  letter-spacing: -.042em;
}
.hero__riga { display: block; text-wrap: balance; } /* 3 Step, M4: va a capo anche da computer (prima: nowrap) */
.hero__sotto {
  position: absolute;
  z-index: 4;
  left: calc(50% - var(--u) * 45.55);
  bottom: calc(var(--u) * 3.1);
  width: min(calc(var(--u) * 28.4), calc(var(--u) * 45.55 - 228px));
  font-size: max(14px, calc(var(--u) * 1.1));
  font-weight: 500;
  line-height: 1.5;
  color: var(--nero);
  text-wrap: pretty;
}
.hero__sotto--link {
  left: auto;
  right: calc(50% - var(--u) * 45.55);
  width: min(calc(var(--u) * 24), calc(var(--u) * 45.55 - 228px));
  text-align: right;
}
.hero__sotto--link a { white-space: nowrap; }
.hero__sotto a, .rimando, .negozio__motto a, .domanda__r a {
  font-weight: 700;
  color: var(--nero);
  text-decoration: underline;
  text-decoration-color: var(--rosso);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.hero__btn {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--u) * 3.1);
  translate: -50% 0;
  min-height: max(56px, calc(var(--u) * 4.4));
  padding-inline: max(30px, calc(var(--u) * 3));
  font-size: max(16px, calc(var(--u) * 1.3));
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(17, 17, 17, .14);
}
.hero__btn .ico { width: 1.35em; height: 1.35em; }

/* ───────── I TRE PASSI ───────── */
.vantaggi { background: var(--bianco); border-block: 1px solid var(--linea); }
.vantaggi__lista { display: grid; grid-template-columns: repeat(3, 1fr); }
.vantaggi__voce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: clamp(84px, 8.6vw, 124px);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.vantaggi__voce + .vantaggi__voce { border-left: 1px solid var(--linea); }
.vantaggi__voce .ico { width: clamp(30px, 2.8vw, 40px); height: clamp(30px, 2.8vw, 40px); }
.vantaggi__n { color: var(--rosso); font-weight: 800; }

/* ───────── OFFERTE ───────── */
.frecce { display: flex; gap: 12px; flex: none; }
.carosello { margin-top: clamp(32px, 3.6vw, 52px); margin-right: calc(-1 * var(--gronda)); }
.offerte__lista {
  --gap: clamp(14px, 1.6vw, 24px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 27.6vw, 420px);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-right: var(--gronda);
  padding-bottom: 4px;
}
.offerte__lista::-webkit-scrollbar { display: none; }
.offerta { scroll-snap-align: start; display: flex; flex-direction: column; }
.offerta__cornice {
  display: block;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--fondo-chiaro);
}
.offerta__foto { width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; }
.offerta__testo { padding-top: 18px; }
.offerta__nome { font-size: clamp(17px, 1.42vw, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.offerta__prezzo {
  margin-top: 4px;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--rosso);
  letter-spacing: -.02em;
}
.barra {
  position: relative;
  height: 4px;
  margin-top: clamp(24px, 2.6vw, 36px);
  margin-right: var(--gronda);
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;
}
.barra__pieno {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--larghezza, 14%);
  border-radius: inherit;
  background: var(--nero);
  translate: var(--spostamento, 0) 0;
  transition: translate .3s var(--ease-out), width .3s var(--ease-out);
}
.offerte__note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  margin-top: 18px;
}
.offerte__nota { text-align: right; font-size: 15px; font-weight: 700; }
/* tutte le schede in vista: frecce e barra non servono */
.offerte.carosello--fermo .frecce,
.offerte.carosello--fermo .barra { display: none; }

/* ───────── I NUMERI ───────── */
.esperienza { background: var(--bianco); }
.esperienza__riga {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto auto minmax(0, .7fr);
  align-items: end;
  column-gap: clamp(32px, 5.4vw, 88px);
  padding-block: clamp(56px, 7vw, 104px);
  border-block: 1px solid var(--linea);
}
.esperienza__titolo {
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  max-width: 10.5em;
  text-wrap: balance;
}
.numero { display: block; }
.numero__cifra {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-size: clamp(84px, 12vw, 176px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.numero__cifra::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.03em;
  right: -.05em;
  bottom: .03em;
  height: .2em;
  background: var(--giallo);
  transform: skewX(-20deg);
}
.numero__testo {
  display: block;
  margin-top: 16px;
  max-width: 11em;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.esperienza__nota { justify-self: end; padding-bottom: 4px; font-size: 16px; }
.rimando { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rimando .ico { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rimando:hover .ico { transform: translateX(4px); } }

/* ───────── REPARTI: una griglia regolare, tutte le schede uguali, col nome sotto la foto ─────────
   (2 Step, 03/11/2026, Domenico: «i reparti del negozio, uno più grande, uno più piccolo, non si capisce granché, deve
   essere più chiaro»): 4 per riga da computer, 3 dal tablet, 2 dal telefono */
.reparti__griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* tutte le righe alte come la più alta: un nome su due o tre righe non allunga solo la sua (secondo giro, 03/11) */
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(32px, 3.6vw, 52px);
}
.reparto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--linea);
  container-type: inline-size;
}
.reparto__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fondo-scheda); }
/* il nome copre la foto quando si avvicina (hover): sta sopra, col suo fondo */
.reparto__nome {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--bianco);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.reparto__nome .ico { flex: none; width: 26px; height: 26px; }
/* la scheda stretta (sotto i 210 px: telefono, tablet piccolo, 900-970 px): l'icona sopra il nome, così le parole lunghe
   («elettrodomestici») stanno intere, come nell'etichetta di prima della tornata (secondo giro, 03/11) */
@container (max-width: 209.98px) {
  .reparto__nome { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ───────── DA DOVE ARRIVA LA MERCE: un elenco grande ───────── */
.provenienza { background: var(--fondo-chiaro); }
.provenienza__riga {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 32px clamp(32px, 5vw, 80px);
  padding-block: var(--spazio);
}
.provenienza__titolo {
  font-size: clamp(32px, 4.45vw, 64px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.provenienza__testo { font-size: clamp(16px, 1.32vw, 19px); line-height: 1.5; color: var(--testo-2); text-wrap: pretty; }
.provenienza__testo + .provenienza__testo { margin-top: 8px; }
.provenienza__chiusa { margin-top: 22px; font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; }
.pillole { margin-top: 22px; border-top: 1.5px solid var(--nero); }
.pillola {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  min-height: clamp(72px, 7.4vw, 104px);
  padding-block: 12px;
  border-bottom: 1px solid #DEDDD8;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.pillola .ico { width: clamp(30px, 2.8vw, 40px); height: clamp(30px, 2.8vw, 40px); }
.pillola__testo { display: inline-block; }
.pillola__testo::first-letter { text-transform: uppercase; }

/* ───────── VOLANTINO + ISCRIZIONE ───────── */
.volantino-sez__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}
.volantino {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.6vw, 56px);
  border-radius: var(--raggio-l);
  background: var(--fondo-chiaro);
  overflow: hidden;
}
.volantino__palco { position: relative; flex: 1; margin-top: clamp(20px, 2.4vw, 36px); }
/* le tre pagine vere del volantino, a ventaglio */
.volantino__apri {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 29vw, 440px);
  cursor: zoom-in;
  border-radius: var(--raggio-s);
}
.volantino__foglio {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 96%;
  max-width: none;
  border-radius: 6px;
  background: var(--bianco);
  box-shadow: 0 2px 6px rgba(17, 17, 17, .06), 0 22px 44px rgba(17, 17, 17, .13);
  translate: -50% -50%;
  transition: translate .6s var(--ease-out), rotate .6s var(--ease-out);
}
.volantino__foglio--1 { translate: calc(-50% - 74%) -48%; rotate: -7deg; }
.volantino__foglio--3 { translate: calc(-50% + 74%) -48%; rotate: 7deg; }
.volantino__freccia { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; background: var(--bianco); }
.volantino__freccia--sx { left: 0; }
.volantino__freccia--dx { right: 0; }
.volantino__comandi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 2.4vw, 36px);
}
.volantino__pagine {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.volantino__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--rosso); }

.iscrizione {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3.6vw, 56px);
  border-radius: var(--raggio-l);
  background: var(--fondo-chiaro);
}
.iscrizione__ico { width: 44px; height: 44px; }
.iscrizione__corpo { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.iscrizione__titolo {
  font-size: clamp(26px, 2.75vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.iscrizione__testo { margin-top: 16px; font-size: clamp(15.5px, 1.2vw, 17px); color: var(--testo-2); max-width: 32em; text-wrap: pretty; }
.iscrizione__testo + .iscrizione__testo { margin-top: 8px; }
.iscrizione__pulsanti { display: grid; gap: 12px; width: 100%; margin-top: auto; padding-top: clamp(24px, 2.6vw, 36px); }

/* ───────── DOMANDE: titolo fermo, domande coi filetti ───────── */
.domande > .contenitore {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: start;
}
.domande .titolo { position: sticky; top: calc(var(--testata) + 36px); }
.domande__lista { border-top: 1.5px solid var(--nero); }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(72px, 6.8vw, 96px);
  padding-block: 18px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.domanda__q::-webkit-details-marker { display: none; }
.domanda__segno {
  flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("/assets/img/icone/espandi.svg") center / contain no-repeat;
  mask: url("/assets/img/icone/espandi.svg") center / contain no-repeat;
}
.domanda[open] .domanda__segno {
  -webkit-mask-image: url("/assets/img/icone/riduci.svg");
  mask-image: url("/assets/img/icone/riduci.svg");
}
.domanda__r {
  padding-bottom: 26px;
  margin-top: -6px;
  max-width: 38em;
  font-size: clamp(16px, 1.2vw, 17px);
  color: var(--testo-2);
}

/* ───────── DOVE SIAMO ───────── */
.negozio__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
/* con la mappa: la mappa grande, il testo su una scheda sopra */
.negozio__griglia--mappa { position: relative; display: block; }
.negozio__griglia--mappa .negozio__testi {
  position: absolute;
  z-index: 2;
  left: calc(var(--margine) + clamp(16px, 2vw, 32px));
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(490px, 44%);
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-alta);
}
.negozio__griglia--mappa .titolo { font-size: clamp(30px, 3.6vw, 52px); }
.negozio__griglia--mappa .negozio__testi .btn { min-height: 54px; }
.negozio__indirizzo {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  font-size: clamp(17px, 1.42vw, 20px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.012em;
}
.negozio__indirizzo .ico { width: 28px; height: 28px; }
.negozio__indirizzo .riga { display: block; }
.negozio__testi .btn { margin-top: 20px; }
.negozio__motto { margin-top: 14px; font-size: 14.5px; color: var(--testo-3); text-wrap: pretty; }
.negozio__motto + .negozio__motto { margin-top: 4px; }
.negozio__info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--testo-3);
}
.negozio__info strong { color: var(--nero); font-weight: 700; }
.negozio__info .ico { width: 24px; height: 24px; color: var(--nero); }
.mappa {
  position: relative;
  display: block;
  height: clamp(540px, 47vw, 680px);
  border-radius: var(--raggio-l);
  overflow: hidden;
  background: var(--muro);
  transition: scale .14s var(--ease-out);
}
.mappa img { width: 100%; height: 100%; object-fit: cover; }
.mappa__etichetta {
  position: absolute;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--bianco);
  box-shadow: var(--ombra);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mappa:hover .mappa__etichetta { box-shadow: inset 0 0 0 1.5px var(--nero), var(--ombra); }
}

/* ───────── PIEDE ───────── */
.piede { background: var(--bianco); border-top: 1px solid var(--linea); }
.piede__riga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px clamp(32px, 5vw, 80px);
  padding-block: clamp(48px, 5.6vw, 80px);
}
.piede__logo img { height: 132px; width: auto; }
.piede__descr { font-size: clamp(18px, 1.5vw, 21px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; max-width: 24em; text-wrap: balance; }
.piede__recapiti { margin: 12px 0 22px; font-size: 14.5px; line-height: 1.65; color: var(--testo-2); }
.piede__recapiti a { color: inherit; text-underline-offset: 3px; }
.piede__link { display: grid; justify-items: end; gap: 10px; }
.piede__menu { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 16px; font-weight: 700; }
.piede__menu a { text-decoration: none; padding: 4px 0; }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover { text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
.social { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.social li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.social .ico { width: 24px; height: 24px; }
.piede__legale { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--testo-3); }
.piede__legale a { text-decoration: none; padding: 6px 2px; }
@media (hover: hover) and (pointer: fine) {
  .piede__legale a:hover { color: var(--nero); text-decoration: underline; }
}
.piede__menu, .piede__legale { align-items: baseline; }
.piede__fondo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 18px 24px;
  border-top: 1px solid var(--linea);
  font-size: 13px;
  color: var(--testo-3);
}
.piede__note-legali a { color: inherit; }
.credit a { color: var(--nero); font-weight: 700; }

/* ───────── VOLANTINO DA SFOGLIARE ───────── */
.sfoglia {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bianco);
  color: var(--nero);
  overflow: hidden;
}
.sfoglia::backdrop { background: rgba(17, 17, 17, .25); }
html.menu-aperto { overflow: hidden; }
.sfoglia[open] { display: flex; flex-direction: column; }
.sfoglia__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top, 0px)) var(--margine) 12px;
}
.sfoglia__pagine { font-weight: 700; font-size: 16px; }
.sfoglia__chiudi {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bianco);
  box-shadow: inset 0 0 0 1.5px var(--nero);
}
.sfoglia__chiudi .ico { width: 18px; height: 18px; rotate: 45deg; }
.sfoglia__traccia {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sfoglia__traccia::-webkit-scrollbar { display: none; }
.sfoglia__pagina {
  display: grid;
  place-items: center;
  padding: 0 84px max(24px, env(safe-area-inset-bottom, 0px));
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-height: 0;
}
.sfoglia__pagina img {
  max-height: calc(100dvh - 110px);
  width: auto;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(17, 17, 17, .14);
  background: var(--bianco);
}
.sfoglia__freccia { position: absolute; top: 50%; translate: 0 -50%; }
.sfoglia__freccia--sx { left: max(14px, env(safe-area-inset-left, 0px)); }
.sfoglia__freccia--dx { right: max(14px, env(safe-area-inset-right, 0px)); }

/* il pulsante principale, fisso da telefono: dopo la hero, mai sopra la firma */
.wa-fisso { display: none; }

/* ═════════ PAGINE LEGALI E 404 ═════════ */
.pagina-legale { padding-block: clamp(72px, 8vw, 120px) var(--spazio); background: var(--bianco); }
.legale { max-width: 820px; margin-inline: auto; font-size: 16.5px; line-height: 1.68; color: var(--testo-2); }
.legale h1 { font-size: clamp(36px, 4.9vw, 70px); font-weight: 800; letter-spacing: -.042em; line-height: 1.03; color: var(--nero); }
.legale h1 + p { margin-top: 14px; font-size: 14.5px; color: var(--testo-3); }
.legale h2 {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.18;
  color: var(--nero);
}
.legale p, .legale ul, .legale table { margin-top: 14px; }
.legale ul { padding-left: 1.2em; list-style: disc; }
.legale li + li { margin-top: 6px; }
.legale li::marker { color: var(--rosso); }
.legale a:not(.btn) { color: var(--nero); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; font-size: 14.5px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.legale th { color: var(--nero); font-weight: 700; background: var(--fondo-chiaro); white-space: nowrap; }
.legale td { min-width: 130px; }
/* la 404: i podi vuoti del kit */
.pagina-legale--404 {
  display: flex;
  align-items: flex-start;
  min-height: min(82svh, 900px);
  padding-bottom: 40vw;
  background:
    linear-gradient(to bottom, #fff 0, #fff 34%, rgba(255, 255, 255, 0) 62%),
    url("/assets/img/hero/fondale-podi.webp") center bottom / 100% auto no-repeat;
}
@media (min-width: 1100px) { .pagina-legale--404 { padding-bottom: 34vw; } }
.legale--404 { text-align: center; max-width: 720px; }
.legale--404 h1 { font-size: clamp(40px, 6vw, 88px); }
.legale--404 .btn { margin-top: 12px; }

/* ═════════ TABLET ═════════ */
@media (max-width: 1180px) {
  .testata__logo img { height: 108px; }
  .avviso__testo { font-size: 12.5px; }
  .esperienza__riga { grid-template-columns: repeat(2, auto) 1fr; row-gap: 40px; }
  .esperienza__titolo { grid-column: 1 / -1; max-width: none; }
  .esperienza__nota { align-self: end; }
  .provenienza__riga, .domande > .contenitore { grid-template-columns: minmax(0, 1fr); }
  .domande .titolo { position: static; }
  .volantino-sez__griglia { grid-template-columns: minmax(0, 1fr); }
  .volantino__apri { min-height: clamp(320px, 46vw, 520px); }
  .iscrizione__pulsanti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═════════ LA HERO, DA 1023 PX IN GIÙ ═════════ */
@media (max-width: 1023px) {
  /* l'avviso prima della hero */
  .avviso { position: relative; top: auto; padding: 10px var(--margine) 0; }
  .avviso__testo { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; max-width: none; padding: 9px 14px; border-radius: var(--raggio-s); font-size: 12.5px; line-height: 1.4; }
  .avviso__punto { margin-top: 4px; }

  /* la hero: titolo in alto, gli oggetti grandi al centro, testi e pulsante sul pavimento.
     La scena sta nel flusso (i margini negativi tolgono il muro e il pavimento vuoti). */
  .hero__scena {
    --S: 118vw;
    --H: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 24px var(--margine) 26px;
  }
  .hero__palco::before, .hero__palco::after { display: none; }
  .hero__palco {
    position: relative;
    order: 2;
    left: auto;
    bottom: auto;
    flex: none;
    margin: calc(var(--S) * -.107) 0 calc(var(--S) * -.084);
  }
  .hero__velo {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
      linear-gradient(to bottom, #fff 0, #fff 14%, rgba(255, 255, 255, 0) 34%),
      linear-gradient(to top, #fff 0, #fff 15%, rgba(255, 255, 255, 0) 30%);
  }
  .hero__titolo { position: relative; order: 1; left: auto; right: auto; bottom: auto; font-size: clamp(32px, 9.3vw, 56px); line-height: 1.04; letter-spacing: -.04em; }
  .hero__sotto, .hero__sotto--link {
    position: relative;
    order: 3;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 34em;
    font-size: 14.5px;
    line-height: 1.42;
    text-align: center;
    text-wrap: balance;
  }
  .hero__sotto--link { order: 4; margin-top: 6px; }
  .hero__btn { position: relative; order: 5; left: auto; bottom: auto; translate: none; margin-top: 14px; width: 100%; max-width: 460px; min-height: 54px; padding-inline: 18px; font-size: 15.5px; }
}

/* fra 901 e 1023 px la hero è nel flusso: il logo resta dentro la testata */
@media (min-width: 901px) and (max-width: 1023px) {
  .testata__logo { align-self: center; padding: 0; margin-left: 0; background: none; border-radius: 0; box-shadow: none; transform: none !important; }
  .testata__logo img { height: 68px; }
}

/* ═════════ DA 900 PX IN GIÙ ═════════ */
@media (max-width: 900px) {
  :root { --testata: 68px; }
  /* testata col menu a tendina */
  .testata__riga { gap: 12px; }
  .testata__logo {
    align-self: center;
    padding: 0;
    margin-left: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
  }
  .testata__logo img { height: 56px; }
  .testata__trovaci { margin-left: auto; padding: 6px 12px 6px 8px; font-size: 14px; gap: 5px; }
  .testata__trovaci .ico { width: 18px; height: 18px; }
  .testata__menu {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-right: -8px;
    border-radius: 8px;
  }
  .testata__barre, .testata__barre::before, .testata__barre::after {
    display: block;
    width: 22px; height: 2px; border-radius: 2px;
    background: var(--nero);
    transition: transform .25s var(--ease-out), opacity .2s ease;
  }
  .testata__barre { position: relative; }
  .testata__barre::before, .testata__barre::after { content: ""; position: absolute; left: 0; }
  .testata__barre::before { top: -7px; }
  .testata__barre::after { top: 7px; }
  .testata__menu[aria-expanded="true"] .testata__barre { background: transparent; }
  .testata__menu[aria-expanded="true"] .testata__barre::before { transform: translateY(7px) rotate(45deg); }
  .testata__menu[aria-expanded="true"] .testata__barre::after { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: block;
    background: var(--bianco);
    border-top: 1px solid var(--linea);
    box-shadow: 0 16px 30px rgba(17, 17, 17, .08);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity .15s var(--ease-out), translate .15s var(--ease-out), visibility 0s linear .15s;
  }
  .menu.aperto {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity .25s var(--ease-out), translate .25s var(--ease-out);
  }
  .menu__lista { flex-direction: column; gap: 0; padding: 8px var(--margine) 16px; }
  .menu__voce { display: block; padding: 16px 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; border-bottom: 1px solid var(--linea); }
  .menu__lista li:last-child .menu__voce { border-bottom: 0; }
  .menu__voce::after { display: none; }

  .vantaggi__voce { flex-direction: column; justify-content: flex-start; gap: 8px; min-height: 0; padding: 22px 8px; font-size: 14px; letter-spacing: -.01em; text-align: center; }
  .vantaggi__voce .ico { width: 28px; height: 28px; }

  .negozio__griglia { grid-template-columns: minmax(0, 1fr); }
  .piede__riga { grid-template-columns: auto minmax(0, 1fr); }
  .piede__link { grid-column: 1 / -1; justify-items: start; }

  /* la mappa sotto il testo, al vivo */
  .negozio__griglia--mappa { padding-inline: 0; }
  .negozio__griglia--mappa .negozio__testi {
    position: static;
    translate: none;
    width: auto;
    padding: 0 var(--margine) 28px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .mappa { height: min(92vw, 420px); margin-inline: var(--margine); }
}

/* ═════════ TELEFONO ═════════ */
@media (max-width: 767px) {
  .wa-fisso {
    position: fixed;
    z-index: 40;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--giallo);
    color: var(--nero);
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(17, 17, 17, .22);
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  }
  .wa-fisso .ico { width: 20px; height: 20px; }
  .wa-fisso.visibile {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
  }
  .wa-fisso.visibile:active { transform: translate(-50%, 0) scale(.97); transition-duration: .12s; }
  /* lo spazio in fondo: la firma resta sopra il pulsante */
  .piede__fondo { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  /* la scena da telefono: stessi pezzi, ricomposti per uno schermo verticale. --S cresce con l'altezza dello schermo */
  .hero__scena { --S: clamp(150vw, calc((100svh - 480px) * 2.85), 196vw); padding-top: 20px; }
  .og--pianta, .og--flaconi, .og--sedia, .og--tavolo { display: none; }
  .og--lavatrice    { --x: 19.6%; --y: 42.4%; --w: 19.6%; }
  .og--friggitrice  { --x: 33.4%; --y: 63.4%; --w: 11.6%; }
  .og--cuffie       { --x: 26.4%; --y: 26.6%; --w: 8.6%; }
  .og--orsetto      { --x: 34.2%; --y: 38.6%; --w: 8.8%; }
  .og--scarpa       { --x: 44.4%; --y: 72.8%; --w: 9.8%; }
  .og--pentole      { --x: 47.4%; --y: 59.6%; --w: 21.4%; }
  .og--aspirapolvere{ --x: 66.6%; --y: 36.6%; --w: 12.4%; }
  .og--manubri      { --x: 62.8%; --y: 20.6%; --w: 8.6%; }
  .og--trapano      { --x: 35.2%; --y: 19.2%; --w: 11%; }
  .hero__etichetta  { left: 42.4%; top: 31%; width: 24%; }

  .sezione__testa { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 12px; }
  .sezione__testa > div:first-child { display: contents; }
  .sezione__testa .titolo { grid-column: 1; grid-row: 1; }
  .sezione__testa .frecce { grid-column: 2; grid-row: 1; }
  .sezione__testa .sottotitolo { grid-column: 1 / -1; }
  .frecce .freccia { width: 44px; height: 44px; }
  .offerte__lista { grid-auto-columns: 68vw; }
  .offerte__note { flex-direction: column; }
  .offerte__nota { text-align: left; font-size: 14.5px; }

  .esperienza__riga { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 26px; }
  .esperienza__nota { grid-column: 1 / -1; justify-self: start; }
  .numero__cifra { font-size: clamp(84px, 25vw, 112px); }
  .numero__testo { margin-top: 12px; font-size: 15px; }

  /* i reparti su due colonne, tutte le schede uguali */
  .reparti__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .reparto__nome { min-height: 58px; padding: 10px 12px; gap: 8px; font-size: 14px; }
  .reparto__nome .ico { width: 20px; height: 20px; }

  .volantino { padding: 24px 18px 20px; }
  .volantino__apri { min-height: 270px; }
  .volantino__foglio--1 { translate: calc(-50% - 56%) -48%; rotate: -6deg; }
  .volantino__foglio--3 { translate: calc(-50% + 56%) -48%; rotate: 6deg; }
  .volantino__freccia { width: 44px; height: 44px; }
  .volantino__freccia--sx { left: -8px; }
  .volantino__freccia--dx { right: -8px; }
  .iscrizione { padding: 26px 20px; }
  .iscrizione__testo { font-size: 14.5px; }
  .legale td { min-width: 120px; }
  .legale td:nth-child(3) { min-width: 240px; }
  .iscrizione__pulsanti { grid-template-columns: minmax(0, 1fr); }
  .iscrizione .btn { padding-inline: 16px; font-size: 14.5px; white-space: nowrap; }

  .piede__riga { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; padding-block: 40px 28px; }
  .piede__logo img { height: 96px; }
  .piede__descr { margin-inline: auto; }
  .piede__recapiti { margin-bottom: 16px; }
  .social { justify-content: center; gap: 12px 24px; }
  .piede__legale, .piede__menu { justify-content: center; }
  .piede__link { justify-items: center; }
  .piede__fondo { justify-content: center; text-align: center; }


  .sfoglia__pagina { padding: 0 16px max(80px, calc(64px + env(safe-area-inset-bottom, 0px))); }
  .sfoglia__pagina img { max-height: calc(100dvh - 150px); }
  .sfoglia__freccia { top: auto; bottom: max(16px, env(safe-area-inset-bottom, 0px)); translate: none; }
}

/* telefoni bassi: tutto in una schermata, pulsante compreso */
@media (max-width: 640px) and (max-height: 720px) {
  .hero__scena { --S: clamp(132vw, calc((100svh - 480px) * 2.85), 196vw); padding-block: 14px 18px; }
  .hero__titolo { font-size: clamp(28px, 8.4vw, 34px); }
  .hero__sotto, .hero__sotto--link { font-size: 13.5px; line-height: 1.36; }
  .hero__btn { margin-top: 10px; min-height: 50px; }
  .avviso { padding-top: 6px; }
  .avviso__testo { padding-block: 6px; font-size: 12px; }
}

/* ═════════ MOVIMENTO ═════════
   Le regole del 5-bis: solo transform e opacity, curve --ease-out e --ease-in-out, hover solo col mouse,
   :active al tocco, con «riduci animazioni» restano le dissolvenze e spariscono gli spostamenti.
   In più, col salto: gli oggetti della hero entrano uno dopo l'altro, quelli in volo galleggiano e tutti
   si spostano a velocità diverse col mouse e scorrendo (main.js). */

/* la hero entra al caricamento, senza aspettare il JavaScript (il fondale non parte mai da opacity 0) */
@keyframes thk-sale { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes thk-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes thk-timbro { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes thk-arriva { from { opacity: 0; transform: translateY(46px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes thk-galleggia { from { transform: translateY(0); } to { transform: translateY(var(--g, -12px)); } }
@keyframes thk-oscilla { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes thk-luce {
  0% { transform: translateX(-120%) skewX(-18deg); }
  24%, 100% { transform: translateX(430%) skewX(-18deg); }
}

.hero__riga:nth-child(1) { animation: thk-sale .8s var(--ease-out) .05s both; }
.hero__riga:nth-child(2) { animation: thk-sale .8s var(--ease-out) .16s both; }
.hero__sotto { animation: thk-sale .8s var(--ease-out) .5s both; }
.hero__btn { animation: thk-sale .8s var(--ease-out) .42s both; }
.og img { animation: thk-arriva .95s var(--ease-out) var(--r, .3s) both; }
.og--vola img {
  animation:
    thk-arriva .95s var(--ease-out) var(--r, .3s) both,
    thk-galleggia var(--t, 4.6s) var(--ease-in-out) calc(var(--r, .3s) + 1s) infinite alternate;
}
.og--lavatrice     { --r: .18s; }
.og--friggitrice   { --r: .26s; }
.og--pentole       { --r: .34s; }
.og--aspirapolvere { --r: .4s; }
.og--tavolo        { --r: .46s; }
.og--sedia         { --r: .5s; }
.og--scarpa        { --r: .44s; --g: -10px; --t: 5.2s; }
.og--orsetto       { --r: .52s; }
.og--cuffie        { --r: .58s; --g: -14px; --t: 4.4s; }
.og--trapano       { --r: .62s; --g: -15px; --t: 5s; }
.og--manubri       { --r: .66s; --g: -11px; --t: 4s; }
.og--flaconi       { --r: .7s; }
.og--pianta        { --r: .74s; }
.hero__cartellino { animation: thk-timbro .75s var(--ease-out) .42s both; }
.hero__oscilla { animation: thk-oscilla 3.8s var(--ease-in-out) 1.2s infinite alternate; }
.hero__luce::before { animation: thk-luce 6s linear 1.6s infinite; }
/* fuori dallo schermo i movimenti continui della hero si fermano */
.hero--ferma .og img, .hero--ferma .hero__oscilla, .hero--ferma .hero__luce::before { animation-play-state: paused; }

/* le sezioni che arrivano scorrendo (con il fallback: senza JavaScript tutto resta visibile) */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
/* nel carosello le schede entrano senza spostarsi fuori dalla traccia */
.js .offerte__lista .reveal { transform: scale(.96); }
.js .offerte__lista .reveal.in { transform: none; }

/* l'avviso d'apertura: il punto rosso respira, come una spia accesa */
@keyframes thk-spia { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
.avviso__punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rosso);
  animation: thk-spia 2.2s var(--ease-out) infinite;
}

/* le tessere: la foto si avvicina col mouse */
.offerta__foto, .reparto__foto { transition: transform .7s var(--ease-out); }
.mappa img { transition: transform .9s var(--ease-out); }
.reparto { transition: scale .14s var(--ease-out); }
.reparto:active { scale: .985; }
@media (hover: hover) and (pointer: fine) {
  .offerta:hover .offerta__foto, .reparto:hover .reparto__foto { transform: scale(1.05); }
  .volantino__apri:hover .volantino__foglio--1 { translate: calc(-50% - 84%) -48%; rotate: -9deg; }
  .volantino__apri:hover .volantino__foglio--3 { translate: calc(-50% + 84%) -48%; rotate: 9deg; }
  .mappa:hover img { transform: scale(1.03); }
}
.volantino__apri:active .volantino__foglio { transition-duration: .14s; }
.mappa:active { scale: .995; }

/* domande: la risposta scende, il segno gira */
@keyframes thk-apre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.domanda[open] .domanda__r { animation: thk-apre .35s var(--ease-out); }
.domanda__segno { transition: transform .25s var(--ease-out), scale .12s var(--ease-out); }
.domanda[open] .domanda__segno { transform: rotate(180deg); }
.domanda__q:active .domanda__segno { scale: .85; }
@media (hover: hover) and (pointer: fine) {
  .domanda__q { transition: color .2s ease; }
  .domanda__q:hover { color: var(--rosso); }
}

/* il volantino da sfogliare: si apre morbido, si chiude subito */
@keyframes thk-finestra { from { opacity: 0; } to { opacity: 1; } }
@keyframes thk-pagine { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.sfoglia[open] { animation: thk-finestra .25s var(--ease-out); }
.sfoglia[open] .sfoglia__traccia { animation: thk-pagine .45s var(--ease-out); }
.sfoglia__chiudi { transition: scale .12s var(--ease-out); }
.sfoglia__chiudi:active { scale: .94; }

/* menu da telefono: le voci arrivano una dopo l'altra; si chiude più in fretta di come si apre */
@media (max-width: 900px) {
  .menu__lista li { opacity: 0; transform: translateY(10px); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
  .menu.aperto .menu__lista li { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .35s var(--ease-out); }
  .menu.aperto .menu__lista li:nth-child(2) { transition-delay: .04s; }
  .menu.aperto .menu__lista li:nth-child(3) { transition-delay: .08s; }
  .menu.aperto .menu__lista li:nth-child(4) { transition-delay: .12s; }
  .menu__voce:active { background: var(--fondo-chiaro); }
}

/* meno movimento, non zero: restano le dissolvenze, spariscono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  .hero__riga:nth-child(1), .hero__riga:nth-child(2), .hero__sotto, .hero__btn { animation-name: thk-appare; }
  .og img, .og--vola img { animation: thk-appare .6s ease var(--r, .3s) both; }
  .hero__cartellino { animation: thk-appare .6s ease .2s both; }
  .hero__oscilla { animation: none; }
  .hero__luce { display: none; }
  .js .reveal { transform: none; transition: opacity .6s ease; }
  .js .offerte__lista .reveal { transform: none; }
  .avviso__punto::after { animation: none; display: none; }
  .domanda[open] .domanda__r { animation-name: thk-appare; }
  .sfoglia[open] .sfoglia__traccia { animation-name: thk-appare; }
  .offerta__foto, .reparto__foto, .mappa img { transition: none; }
  .menu__lista li { transform: none !important; }
  .wa-fisso, .wa-fisso.visibile { transform: translate(-50%, 0); }
  .testata__logo { transition: none; }
}

/* i testi: a capo ordinati */
.offerta__nome, .reparto__nome, .domanda__q, .vantaggi__voce, .negozio__info-titolo { text-wrap: balance; }
.offerte__nota, .negozio__motto { text-wrap: pretty; }

/* ═════════ PAGINE INTERNE ═════════
   Le pagine interne sono fatte coi pezzi della home (09 § 0-quater, punto 2.4), con le stesse classi.
   Qui ci sono solo i ritocchi che servono a una pagina, ognuno sotto la classe del suo <body>. */

/* pezzi della home dentro altri pezzi della home */
.offerta__testo .rimando { margin-top: 10px; font-size: 14.5px; }
.provenienza__testo a { font-weight: 700; color: var(--nero); text-underline-offset: 3px; }
.provenienza__testo .avviso__punto { display: inline-block; vertical-align: middle; margin-right: 6px; }
.provenienza__corpo > .pillole:first-child { margin-top: 0; }
.provenienza__corpo .iscrizione__titolo + .provenienza__testo { margin-top: 12px; }
.provenienza__corpo .iscrizione__pulsanti { display: flex; flex-wrap: wrap; }
.pillola a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.iscrizione .avviso__testo { width: auto; max-width: none; margin-top: 18px; padding: 12px 14px; border-radius: var(--raggio-s); }
.iscrizione .avviso__testo .avviso__punto { align-self: flex-start; margin-top: 4px; }

/* gli elenchi con frasi intere: la pillola della home, con un corpo da lettura */
body.pagina-offerte .pillola, body.pagina-chi-siamo .pillola {
  min-height: 0;
  padding-block: clamp(16px, 1.7vw, 24px);
  font-size: clamp(16px, 1.38vw, 20px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
body.pagina-offerte .pillola .ico, body.pagina-chi-siamo .pillola .ico { width: 30px; height: 30px; }
body.pagina-chi-siamo .pillola__testo::first-letter { text-transform: none; }
body.pagina-offerte .provenienza__titolo, body.pagina-chi-siamo .provenienza__titolo, body.pagina-contatti .provenienza__titolo,
body.pagina-reparti .provenienza__titolo, body.pagina-reparto .provenienza__titolo { font-size: clamp(30px, 3.6vw, 52px); }
body.pagina-chi-siamo .provenienza__testo + .pillole { margin-top: 18px; }

/* due schede uguali affiancate: la griglia del volantino, con le colonne pari */
body.pagina-chi-siamo .volantino-sez__griglia, body.pagina-contatti .volantino-sez__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.pagina-chi-siamo .iscrizione__corpo, body.pagina-contatti .iscrizione__corpo { justify-content: flex-end; }

/* ─ Offerte ─ */
/* la scheda d'iscrizione larga tutta la pagina: icona a sinistra, pulsanti affiancati */
body.pagina-offerte .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione,
body.pagina-contatti .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione { flex-direction: row; gap: clamp(20px, 3vw, 44px); }
body.pagina-offerte .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione .iscrizione__pulsanti,
body.pagina-contatti .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione .iscrizione__pulsanti { grid-template-columns: repeat(2, max-content); }
body.pagina-offerte .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione .btn,
body.pagina-contatti .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione .btn { white-space: nowrap; }
/* Come funziona: i tre passi della home, col numero grande e il testo sotto il nome */
.passi .vantaggi__lista { margin-top: clamp(36px, 4vw, 60px); border-top: 1.5px solid var(--nero); }
.passi .vantaggi__voce {
  position: relative;
  display: block;
  min-height: 0;
  padding: 26px clamp(24px, 3.4vw, 52px) 0;
  font-size: clamp(19px, 1.7vw, 24px);
}
.passi .vantaggi__voce:first-child { padding-left: 0; }
.passi .vantaggi__voce:last-child { padding-right: 0; }
.passi .vantaggi__voce > .ico { position: absolute; right: clamp(24px, 3.4vw, 52px); top: 28px; width: 34px; height: 34px; }
.passi .vantaggi__voce:last-child > .ico { right: 0; }
.passi .vantaggi__voce h3 { font: inherit; letter-spacing: inherit; }
.passi .vantaggi__n { display: block; margin-bottom: 18px; font-size: clamp(52px, 5.4vw, 78px); line-height: 1; letter-spacing: -.05em; }
.passi .vantaggi__voce .sottotitolo { margin-top: 10px; font-size: clamp(15.5px, 1.2vw, 17px); font-weight: 500; letter-spacing: 0; line-height: 1.5; }

/* ─ Chi siamo ─ */
/* la storia: la banda dei numeri della home, col «20» da solo accanto al testo */
body.pagina-chi-siamo .esperienza__riga { grid-template-columns: auto minmax(0, 1fr); align-items: center; border-block: 0; }
body.pagina-chi-siamo .esperienza__riga .numero__cifra { font-size: clamp(130px, 17.4vw, 250px); }
body.pagina-chi-siamo .esperienza__riga .sottotitolo + .sottotitolo { margin-top: 10px; }
body.pagina-chi-siamo .iscrizione .numero { margin-top: 22px; }
body.pagina-chi-siamo .iscrizione .numero + .iscrizione__testo { margin-top: 18px; }
body.pagina-chi-siamo .iscrizione .numero__cifra { font-size: clamp(64px, 7vw, 104px); }
body.pagina-chi-siamo .iscrizione .esperienza__nota { align-self: flex-start; margin-top: 18px; }
body.pagina-chi-siamo .negozio .sottotitolo { margin-top: 18px; }
body.pagina-chi-siamo .negozio .pillole { width: 100%; margin-top: 16px; }
body.pagina-chi-siamo .negozio .pillola { padding-block: 13px; font-size: 16px; }
body.pagina-chi-siamo .negozio .pillola .ico { width: 26px; height: 26px; }
body.pagina-chi-siamo .negozio .volantino__comandi { justify-content: flex-start; gap: 16px 28px; margin-top: clamp(20px, 2.2vw, 30px); }
body.pagina-chi-siamo .negozio .volantino__comandi .btn { margin-top: 0; }
body.pagina-chi-siamo .mappa { height: auto; aspect-ratio: 16 / 10; }

/* ─ Contatti ─ */
body.pagina-contatti .sezione--chiara .iscrizione { background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); }
body.pagina-contatti .iscrizione .negozio__indirizzo { display: block; margin-top: 0; font-weight: 700; letter-spacing: -.012em; }
body.pagina-contatti .iscrizione .negozio__indirizzo a { color: inherit; text-underline-offset: 3px; white-space: nowrap; }
body.pagina-contatti .iscrizione__corpo ul:first-of-type { display: grid; gap: 6px; margin-top: 16px; }
body.pagina-contatti .iscrizione .pillole { width: 100%; margin-top: 12px; border-top: 0; }
body.pagina-contatti .iscrizione .pillola { gap: 10px; min-height: 0; padding-block: 6px; border-bottom: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
body.pagina-contatti .iscrizione .pillola .ico { width: 20px; height: 20px; }
body.pagina-contatti .iscrizione .pillole + .iscrizione__testo { margin-top: 12px; }
body.pagina-contatti .provenienza__testo { margin-top: 14px; }
body.pagina-contatti .provenienza__corpo .iscrizione__titolo + .provenienza__testo { margin-top: 12px; }
/* la hero senza scena: titolo, testo e pulsante in colonna, centrati */
body.pagina-contatti .hero__scena {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  padding: clamp(64px, 7.4vw, 108px) var(--margine) clamp(56px, 6vw, 88px);
}
body.pagina-contatti .hero__titolo { position: relative; left: auto; right: auto; bottom: auto; font-size: clamp(36px, 4.9vw, 70px); }
body.pagina-contatti .hero__sotto { position: relative; left: auto; bottom: auto; width: auto; margin-top: 20px; font-size: clamp(16px, 1.4vw, 20px); text-align: center; }
body.pagina-contatti .hero__btn { position: relative; left: auto; bottom: auto; translate: none; margin-top: clamp(24px, 2.6vw, 36px); min-height: 56px; font-size: 16px; }

/* ─ le hero con la scena ─ */
@media (min-width: 1024px) {
  body.pagina-offerte .hero__scena { --H: clamp(600px, calc(100svh - var(--testata) - 84px), 60vw); }
  body.pagina-offerte .hero__sotto { left: var(--gronda); }
  body.pagina-offerte .hero__sotto--link { left: auto; right: var(--gronda); }
  /* Chi siamo: la scena del kit è una foto intera: sta sotto il titolo, sfuma ai lati e nel pavimento */
  body.pagina-chi-siamo .hero__scena { --H: clamp(620px, calc(100svh - var(--testata) - 60px), 62vw); --S: min(96vw, calc(var(--H) * 1.72)); }
  body.pagina-chi-siamo .hero__palco { bottom: calc(var(--u) * -6); }
  body.pagina-chi-siamo .hero__palco::before, body.pagina-chi-siamo .hero__palco::after { display: none; }
  body.pagina-chi-siamo .hero__fondo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  body.pagina-chi-siamo .hero__velo {
    top: 0;
    bottom: calc(var(--u) * 6);
    background:
      linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 16%),
      linear-gradient(to top, #fff 0, #fff 6%, rgba(255, 255, 255, 0) 24%);
  }
  body.pagina-chi-siamo .hero__titolo { bottom: calc(var(--u) * 45); }
  body.pagina-chi-siamo .hero__sotto { left: var(--gronda); width: min(calc(var(--u) * 26), calc(50vw - var(--gronda) - 250px)); }
  body.pagina-chi-siamo .hero__sotto--link { left: auto; right: var(--gronda); }
}

@media (max-width: 1023px) {
  body.pagina-chi-siamo .hero__scena { --S: 118vw; }
  body.pagina-chi-siamo .hero__palco { margin: 10px 0 calc(var(--S) * -.05); }
  body.pagina-chi-siamo .hero__velo {
    background:
      linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 12%),
      linear-gradient(to top, #fff 0, #fff 6%, rgba(255, 255, 255, 0) 16%);
  }
}

@media (max-width: 900px) {
  /* i passi e le schede, una sotto l'altra */
  .passi .vantaggi__lista { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .passi .vantaggi__voce,
  .passi .vantaggi__voce:first-child,
  .passi .vantaggi__voce:last-child { padding: 20px 0; border-top: 1.5px solid var(--nero); border-left: 0; text-align: left; }
  .passi .vantaggi__voce > .ico, .passi .vantaggi__voce:last-child > .ico { right: 0; top: 22px; }
  body.pagina-chi-siamo .volantino-sez__griglia, body.pagina-contatti .volantino-sez__griglia { grid-template-columns: minmax(0, 1fr); }
  body.pagina-chi-siamo .esperienza__riga { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  body.pagina-chi-siamo .mappa { margin-inline: 0; }
  body.pagina-offerte .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione,
  body.pagina-contatti .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione { flex-direction: column; }
  body.pagina-offerte .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione .iscrizione__pulsanti,
  body.pagina-contatti .sezione > .contenitore:not(.volantino-sez__griglia) > .iscrizione .iscrizione__pulsanti { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* i titoli lunghi delle pagine: una frase sola, a capo dove serve */
  body.pagina-offerte .hero__titolo, body.pagina-chi-siamo .hero__titolo, body.pagina-contatti .hero__titolo { font-size: clamp(30px, 8.6vw, 44px); text-wrap: balance; }
  body.pagina-offerte .hero__riga, body.pagina-chi-siamo .hero__riga, body.pagina-contatti .hero__riga { display: inline; }
  body.pagina-chi-siamo .esperienza__riga .numero__cifra { font-size: 150px; }
  body.pagina-chi-siamo .iscrizione .numero__cifra { font-size: 84px; }
  .provenienza__corpo .iscrizione__pulsanti { display: grid; }
  .provenienza__corpo .iscrizione__pulsanti .btn { width: 100%; padding-inline: 18px; font-size: 15px; gap: 8px; white-space: nowrap; }
  .provenienza__corpo .iscrizione__pulsanti .btn .ico { width: 20px; height: 20px; }
  .offerta__testo .rimando { font-size: 13.5px; text-underline-offset: 3px; }
  body.pagina-chi-siamo .negozio .volantino__comandi { flex-direction: column; align-items: stretch; }
  body.pagina-chi-siamo .negozio .volantino__comandi .btn { width: 100%; }
}

/* ═════════ CORREZIONI DEL COLLAUDO (01/11/2026): i telefoni stretti ═════════
   Solo sotto i 768 px (il titolo) e sotto i 390 px (pulsanti ed etichette): da 390 px in su il disegno non cambia. */

/* il titolo della home: le due frasi del computer restano due blocchi; a 390 px tre righe, a 360 e 320 al massimo quattro */
@media (max-width: 767px) {
  body:not(.pagina-offerte):not(.pagina-chi-siamo):not(.pagina-contatti) .hero__titolo { font-size: clamp(22px, 7vw, 56px); }
}
@media (max-width: 640px) and (max-height: 720px) {
  body:not(.pagina-offerte):not(.pagina-chi-siamo):not(.pagina-contatti) .hero__titolo { font-size: clamp(22px, 7vw, 34px); }
}

/* l'icona dei pulsanti non si schiaccia mai */
.btn .ico, .wa-fisso .ico { flex-shrink: 0; }

/* il pulsante WhatsApp fisso: sotto i 364 px più compatto, sempre 12 px lontano dai bordi */
@media (max-width: 363px) {
  .wa-fisso { gap: 7px; padding-inline: 14px; font-size: 13px; letter-spacing: -.01em; }
  .wa-fisso .ico { width: 18px; height: 18px; }
}

@media (max-width: 389px) {
  /* i pulsanti gialli larghi (hero e fasce finali): icona e scritta dentro la pillola; se un giorno non ci stanno, la scritta va a capo */
  .hero__btn, body.pagina-contatti .hero__btn,
  .provenienza__corpo .iscrizione__pulsanti .btn {
    gap: 7px;
    padding-inline: 12px;
    font-size: clamp(12.5px, calc(4.35vw - 1.4px), 15.5px);
    letter-spacing: -.02em;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
  .hero__btn .ico, .provenienza__corpo .iscrizione__pulsanti .btn .ico { width: 18px; height: 18px; }

  /* il nome dei reparti sotto i 390 px: un filo più piccolo, così le parole lunghe stanno intere */
  .reparto__nome { padding: 9px 10px; gap: 7px; font-size: 13px; }
  .reparto__nome .ico { width: 18px; height: 18px; }
}

/* i pulsanti della scheda d'iscrizione ai canali: sotto i 360 px un filo più piccoli */
@media (max-width: 359px) {
  .iscrizione .btn {
    gap: 8px;
    padding-inline: 12px;
    font-size: 13px;
    letter-spacing: -.015em;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
  .iscrizione .btn .ico { width: 20px; height: 20px; }
}

/* i reparti sul tablet (641-899 px): tre schede per riga, così il nome sta intero */
@media (min-width: 641px) and (max-width: 899px) {
  .reparti__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═════════ I REPARTI (01/11/2026: «lo store deve essere quasi un ecommerce») ═════════
   /reparti e le 12 pagine /reparti/<reparto>, generate da assets/data/catalogo.json (strumenti/genera-reparti.py).
   Coi pezzi della home: i riquadri dei reparti, le schede delle offerte, i pulsanti, il punto rosso del volantino,
   le note delle offerte e la fascia finale. Il percorso, le pillole e il conteggio non hanno classi nuove: si
   agganciano coi data-attributi, sotto la classe del <body>. */

/* i riquadri dei reparti portano alla pagina del reparto (home e /reparti): la foto si avvicina, l'etichetta diventa gialla */
.reparto__link { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: inherit; color: inherit; text-decoration: none; }
.reparto__link:focus-visible { outline: none; }
/* l'anello della tastiera sopra la foto (la foto, posizionata, coprirebbe il contorno del link) */
.reparto__link:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--nero); pointer-events: none; }
.reparto__nome { transition: background-color .2s ease; }
.reparto__link:active .reparto__nome { background: var(--giallo); transition-duration: .08s; }
@media (hover: hover) and (pointer: fine) {
  .reparto__link:hover .reparto__nome { background: var(--giallo); }
}

/* la prima sezione fa da intestazione compatta: niente hero grande */
:is(body.pagina-reparti, body.pagina-reparto) main > .sezione:first-child { padding-top: clamp(26px, 3.2vw, 48px); }
/* da 1024 px la linguetta del logo pende sotto la testata: il percorso parte sotto di lei */
@media (min-width: 1024px) { :is(body.pagina-reparti, body.pagina-reparto) main > .sezione:first-child { padding-top: 84px; } }
:is(body.pagina-reparti, body.pagina-reparto) .reparti__griglia { margin-top: clamp(32px, 3.6vw, 52px); }

/* il percorso: Home › Reparti › nome */
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] { margin-bottom: clamp(26px, 3.2vw, 48px); }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] ol { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--testo-3); }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] li { display: inline-flex; align-items: center; min-height: 32px; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] .ico { width: 9px; height: 9px; margin-inline: 10px; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] a { padding-block: 6px; text-decoration: none; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] [aria-current] { color: var(--nero); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  :is(body.pagina-reparti, body.pagina-reparto) [data-percorso] a:hover { color: var(--nero); text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* le pillole dei reparti: i pulsanti del kit in piccolo; quello attivo è giallo */
body.pagina-reparto [data-pillole] { margin-top: clamp(26px, 2.8vw, 40px); }
body.pagina-reparto [data-pillole] ul { display: flex; flex-wrap: wrap; gap: 8px; }
body.pagina-reparto [data-pillole] li { flex: none; }
body.pagina-reparto [data-pillole] .btn { min-height: 44px; padding: 8px 16px 8px 13px; gap: 7px; font-size: 14px; white-space: nowrap; }
body.pagina-reparto [data-pillole] .btn .ico { width: 19px; height: 19px; }
body.pagina-reparto [data-pillole] .btn--bordo { box-shadow: inset 0 0 0 1px var(--linea); }
body.pagina-reparto [data-pillole] li:first-child .btn { padding-left: 16px; }
@media (hover: hover) and (pointer: fine) {
  body.pagina-reparto [data-pillole] .btn--bordo:hover { box-shadow: inset 0 0 0 1.5px var(--nero); }
}

/* il conteggio dei prodotti, sopra la griglia */
body.pagina-reparto [data-conteggio] {
  display: flex;
  margin-top: clamp(24px, 2.6vw, 36px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--linea);
}

/* la griglia dei prodotti: le schede delle offerte, ferme in griglia (4 · 3 · 2 per riga) */
body.pagina-reparto .offerte__lista {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 3.6vw, 56px) var(--gap);
  margin-top: clamp(18px, 2vw, 28px);
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
body.pagina-reparto .offerta__cornice { display: grid; place-items: center; aspect-ratio: 1; }
body.pagina-reparto .offerta__foto { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
/* la foto che non c'è ancora: l'icona del reparto sul fondo della scheda */
body.pagina-reparto .offerta__cornice > .ico { width: 30%; height: 30%; color: var(--testo-3); opacity: .3; }
body.pagina-reparto .offerta__testo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding-top: 16px; }
body.pagina-reparto .offerta__testo .rimando { margin-top: auto; padding-top: 12px; padding-bottom: 4px; white-space: normal; text-wrap: balance; }
body.pagina-reparto .offerte__note {
  margin-top: clamp(40px, 4.4vw, 64px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--linea);
}
/* la nota fissa sotto i prodotti: la nota delle offerte della home, a sinistra, in grigio e senza grassetto (secondo
   giro, 03/11: era la classe «offerte__prime», che la home non usa più); la seconda nota, se c'è, resta come in home */
body.pagina-reparto .offerte__note .offerte__nota:first-child { text-align: start; font-size: 14px; font-weight: 400; color: var(--testo-3); }

@media (max-width: 1023px) {
  body.pagina-reparto .offerte__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  /* le pillole in una riga che scorre, da bordo a bordo; il reparto attivo resta in vista (main.js) */
  body.pagina-reparto [data-pillole] { margin-inline: calc(-1 * var(--margine)); }
  body.pagina-reparto [data-pillole] ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 2px var(--margine);
    scroll-padding-inline: var(--margine);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  body.pagina-reparto [data-pillole] ul::-webkit-scrollbar { display: none; }
}

@media (max-width: 767px) {
  body.pagina-reparto .offerte__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  body.pagina-reparto .offerta__cornice { border-radius: var(--raggio-s); }
  body.pagina-reparto .offerta__testo { padding-top: 12px; }
  body.pagina-reparto .offerta__nome { font-size: 15.5px; }
  body.pagina-reparto .offerta__prezzo { font-size: 23px; }
  body.pagina-reparto .offerta__testo .rimando { font-size: 13.5px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .reparto__nome { transition: none; }
}

/* il menu del piede, con le quattro voci: da telefono va a capo, quindi niente punti in mezzo (resterebbero a fine riga) */
@media (max-width: 640px) {
  .piede__menu { gap: 2px 22px; }
  .piede__menu > span[aria-hidden] { display: none; }
}

/* ── 01/11 · fase 2a dei reparti (solo attributi: nessuna classe nuova rispetto alla home) ── */
/* il prezzo che non c'è ancora: «Prezzo in negozio», più piccolo della cifra (offerte, reparti e, dalla 2b, la home) */
.offerta__prezzo[data-prezzo-vuoto] { margin-top: 6px; font-size: clamp(17px, 1.45vw, 21px); font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
body.pagina-reparto .offerta__prezzo[data-prezzo-vuoto] { font-size: clamp(16px, 1.3vw, 19px); }
@media (max-width: 767px) { body.pagina-reparto .offerta__prezzo[data-prezzo-vuoto] { font-size: 15px; } }

/* /reparti: il pulsante WhatsApp sotto la frase */
body.pagina-reparti [data-azioni] { display: flex; flex-wrap: wrap; width: auto; margin-top: clamp(22px, 2.4vw, 32px); padding-top: 0; }

/* il titolo delle pillole, «Cambia reparto» */
body.pagina-reparto [data-pillole] > p { margin-bottom: 12px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--testo-3); }

/* il reparto senza prodotti (dal pannello): l'avviso al posto della griglia */
body.pagina-reparto [data-vuoto] {
  max-width: 720px;
  margin-top: clamp(24px, 2.6vw, 36px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--raggio);
  background: var(--fondo-chiaro);
}
body.pagina-reparto [data-vuoto] p:first-child { font-size: clamp(18px, 1.6vw, 22px); font-weight: 750; line-height: 1.3; color: var(--nero); }
body.pagina-reparto [data-vuoto] p + p { margin-top: 8px; color: var(--testo-2); }
body.pagina-reparto [data-vuoto] .rimando { margin-top: 16px; }

/* da telefono gli H1 lunghi dei reparti («… a Catania, in Viale Libertà») stanno in 3 righe */
@media (max-width: 767px) { body.pagina-reparto .titolo { font-size: min(29px, 7.4vw); } }
/* dove le pillole vanno da bordo a bordo, il loro titolo resta allineato al testo */
@media (max-width: 1199px) { body.pagina-reparto [data-pillole] > p { padding-inline: var(--margine); } }
/* il pulsante di /reparti da telefono: come quelli delle fasce finali, su una riga */
@media (max-width: 640px) {
  body.pagina-reparti [data-azioni] .btn { width: 100%; padding-inline: 18px; font-size: 15px; gap: 8px; white-space: nowrap; }
  body.pagina-reparti [data-azioni] .btn .ico { width: 20px; height: 20px; }
}
@media (max-width: 389px) {
  body.pagina-reparti [data-azioni] .btn { gap: 7px; padding-inline: 12px; font-size: clamp(12.5px, calc(4.35vw - 1.4px), 15.5px); letter-spacing: -.02em; white-space: normal; text-align: center; text-wrap: balance; }
  body.pagina-reparti [data-azioni] .btn .ico { width: 18px; height: 18px; }
}

/* ═════════ 01/11 · TORNATA CHIAREZZA (C38): la home nel nuovo ordine ═════════
   «Spieghiamo all'inizio da dove arriva la merce»: sotto la hero il perché del prezzo (4 schede e i due numeri),
   poi reparti, offerte, come funziona, volantino e canali, domande, apertura e dove siamo. Coi pezzi del kit. */

/* il perché del prezzo: quattro schede piccole, poi la frase e i due numeri */
.perche { background: var(--bianco); }
.perche__titolo { max-width: 15em; }
.fonti {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(32px, 3.6vw, 52px);
}
.fonte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.3vw, 34px);
  border-radius: var(--raggio);
  background: var(--fondo-scheda);
}
.fonte__ico {
  display: grid;
  place-items: center;
  width: clamp(52px, 4.4vw, 64px);
  height: clamp(52px, 4.4vw, 64px);
  margin-bottom: clamp(20px, 2.2vw, 32px);
  border-radius: 50%;
  background: var(--bianco);
  box-shadow: var(--ombra);
}
.fonte__ico .ico { width: 46%; height: 46%; }
.fonte__nome {
  font-size: clamp(19px, 1.65vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.fonte__testo {
  margin-top: 8px;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.45;
  color: var(--testo-2);
  text-wrap: pretty;
}
.perche__fondo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto auto;
  align-items: end;
  column-gap: clamp(32px, 5.4vw, 88px);
  row-gap: 28px;
  margin-top: clamp(40px, 4.4vw, 64px);
  padding-top: clamp(32px, 3.6vw, 52px);
  border-top: 1.5px solid var(--nero);
}
.perche__frase {
  max-width: 21em;
  font-size: clamp(19px, 1.75vw, 26px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.perche .numero__cifra { font-size: clamp(76px, 9vw, 136px); }
.perche__link { grid-column: 1 / -1; font-size: 16px; }

/* reparti e offerte: il rimando sotto la griglia */
.reparti__tutti { margin-top: clamp(22px, 2.4vw, 32px); font-size: 16px; }
.offerte__nota .rimando { font-size: 16px; }

/* come funziona: i tre passi su fondo chiaro, la nota sotto */
.passi .vantaggi__voce .sottotitolo a { font-weight: 700; color: var(--nero); text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.passi__nota {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid #DEDDD8;
  font-size: clamp(15.5px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}
.passi__nota .ico { width: 26px; height: 26px; color: var(--rosso); }

/* volantino e canali: il titolo sopra, due riquadri affiancati con lo stesso peso */
.volantino-sez .volantino-sez__griglia { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); margin-top: clamp(32px, 3.6vw, 52px); }
.volantino .iscrizione__testo { margin-top: 12px; }
.volantino .volantino__palco { margin-top: clamp(14px, 1.6vw, 24px); }
.volantino-sez .iscrizione__titolo { font-size: clamp(24px, 2.3vw, 34px); }

/* l'apertura: la fascia del pannello, stretta, attaccata a «Dove siamo» */
.apertura { padding-top: var(--spazio); background: var(--fondo-chiaro); }
.apertura + .negozio { padding-top: clamp(16px, 1.8vw, 24px); }
.apertura__fascia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: clamp(18px, 1.9vw, 26px) clamp(22px, 2.6vw, 36px);
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra);
}
.apertura__titolo { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.apertura__testo { font-size: clamp(15px, 1.2vw, 17px); color: var(--testo-2); }

/* dove siamo: il pulsante e il rimando in fila */
.negozio__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 20px; }
.negozio__testi .negozio__azioni .btn { margin-top: 0; }
.negozio__testi .negozio__motto:first-of-type { margin-top: 16px; }

@media (max-width: 1180px) {
  .fonti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perche__fondo { grid-template-columns: repeat(2, auto) 1fr; }
  .perche__frase { grid-column: 1 / -1; max-width: 30em; }
  .volantino-sez .volantino-sez__griglia { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .fonti { gap: 10px; }
  .fonte { padding: 18px 16px 20px; border-radius: var(--raggio-s); }
  .fonte__ico { width: 46px; height: 46px; margin-bottom: 18px; }
  .fonte__nome { font-size: 16.5px; }
  .fonte__testo { margin-top: 6px; font-size: 14px; }
  .perche__fondo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 22px; }
  .perche__frase { font-size: 18px; }
  .perche .numero__cifra { font-size: clamp(72px, 21vw, 96px); }
  .passi__nota { align-items: flex-start; }
  .passi__nota .ico { margin-top: 1px; width: 22px; height: 22px; }
  .apertura__fascia { padding: 16px 18px; }
  .apertura__fascia .avviso__punto { align-self: flex-start; margin-top: 7px; }
  .apertura__titolo { flex: 1; }
  .apertura__testo { flex-basis: 100%; padding-left: 25px; font-size: 14.5px; }
  .negozio__azioni .btn { width: 100%; }
}

/* i pezzi della home che usano anche le pagine interne (esperienza, provenienza, pillole), ritoccati per la home */
.perche .esperienza__riga { padding-block: clamp(32px, 3.6vw, 52px) 0; border-bottom: 0; border-top: 1.5px solid var(--nero); }
.perche .esperienza__nota { justify-self: start; padding-bottom: 0; }
.passi .provenienza__riga { display: block; }
.negozio__testi .pillole { width: 100%; margin-top: 16px; border-top: 0; }
.negozio__testi .pillola { gap: 10px; min-height: 0; padding-block: 4px; border-bottom: 0; font-size: 14.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--testo-3); }
.negozio__testi .pillola .ico { width: 19px; height: 19px; color: var(--nero); }
.negozio__testi .pillola a { color: var(--nero); }
/* due fasce chiare di seguito (/offerte, senza più «Come funziona» in mezzo): lo spazio non raddoppia, un filetto le separa */
.provenienza + .provenienza .provenienza__riga { padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid #DEDDD8; }

/* ═════════ CORREZIONI DEL COLLAUDO MIRATO (01/11/2026) ═════════ */

/* 1 · la hero da telefono: gli oggetti in alto (trapano, manubri, cuffie) stanno sotto il titolo, mai sopra.
   Il palco sale sotto il titolo di 10,7 centesimi di --S, cioè il 19% della sua altezza: da lì in giù si aggiunge
   lo spazio in pixel, più del galleggiamento (fino a 15 px), così fra oggetto e titolo restano sempre almeno 10 px (scorrendo, main.js li fa restare indietro) */
@media (max-width: 640px) {
  .og--trapano { --x: 35.6%; --y: calc(19% + 32px); --w: 10.2%; }
  .og--manubri { --y: calc(19% + 28px); }
  .og--cuffie  { --y: calc(19% + 31px); }
}

/* 3 · il percorso in alto dei reparti sta sempre su una riga: «›» non apre mai una riga nuova.
   Se il nome del reparto non ci sta, si accorcia coi puntini (intero resta nel titolo subito sotto) */
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] ol { flex-wrap: nowrap; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] li { flex: none; white-space: nowrap; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] li:last-child { flex: 0 1 auto; min-width: 0; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] li:last-child .ico { flex: none; }
:is(body.pagina-reparti, body.pagina-reparto) [data-percorso] li:last-child [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 4 · da 900 px in giù «Dove siamo» sta sotto la fascia dell'apertura: fra la fascia e la lineetta gialla del titolo
   lo spazio fra due blocchi del kit, non i 16 px di quando il riquadro sta sopra la mappa */
@media (max-width: 900px) {
  .apertura + .negozio { padding-top: clamp(40px, 10vw, 52px); }
}

/* 5 · la fascia finale «Prima di venire in Viale Libertà, scrivici su WhatsApp» (reparti, reparto, chi siamo):
   da computer il titolo prende la colonna larga e il testo col pulsante quella stretta, così il titolo sta in 2-3 righe */
@media (min-width: 1181px) {
  :is(body.pagina-chi-siamo, body.pagina-reparti, body.pagina-reparto) .provenienza__riga:has(> #fascia-titolo) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
}

/* (Punto Affari, audit 7-bis P16, 04/11/2026) una parola lunga scritta dal pannello (un nome, un link incollato) va a capo
   dentro il suo titolo: mai la pagina più larga dello schermo, mai la parola tagliata. Coi testi di oggi non cambia niente */
.hero__titolo, .titolo, .provenienza__titolo, .esperienza__titolo, .iscrizione__titolo, .apertura__titolo, .offerta__nome, .fonte__nome { overflow-wrap: anywhere; }

/* ═════════ 3 STEP (04/11/2026) ═════════
   M4 · i titoli grandi in cima (pagina iniziale, Offerte, Chi siamo, Contatti) vanno a capo anche da computer: una riga che
   non ci sta va a capo, bilanciata (.hero__riga, sopra); le righe scelte dalla cliente restano righe. Da 1024 px il titolo
   sopra la scena sta fra i margini della pagina e nel flusso della scena: il suo fondo resta dov'era (37,6 centesimi di
   --S dal basso, 45 in «Chi siamo»), e con più righe la scena cresce verso l'alto invece di tagliarlo. Coi titoli di oggi
   la scena è alta --H come prima. Contatti ha già la sua scena nel flusso, coi margini. */
@media (min-width: 1024px) {
  body:not(.pagina-contatti) .hero__scena {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: var(--H);
    padding-top: calc(var(--u) * 2.5);
    padding-bottom: calc(var(--u) * 37.6);
  }
  body:not(.pagina-contatti) .hero__titolo { position: relative; bottom: auto; padding-inline: var(--gronda); }
  body.pagina-chi-siamo .hero__scena { padding-bottom: calc(var(--u) * 45); }
  /* voce 10 · la foto vera del magazzino è piena fino in alto: sotto il titolo il velo bianco sale un po' di più, così
     il titolo si legge come sul muro bianco di prima */
  body.pagina-chi-siamo .hero__velo {
    background:
      linear-gradient(to bottom, #fff 0, #fff 6%, rgba(255, 255, 255, .72) 14%, rgba(255, 255, 255, 0) 27%),
      linear-gradient(to top, #fff 0, #fff 6%, rgba(255, 255, 255, 0) 24%);
  }
}

/* voce 2 · nella pagina iniziale la prima riga del titolo è la più grande e le righe dopo più piccole (0,6 della prima):
   stesso carattere, stesso colore, stesso allineamento. Da computer la prima riga è un po' più grande del titolo di prima */
#hero-titolo { font-size: calc(var(--u) * 5.6); }
#hero-titolo .hero__riga + .hero__riga { margin-top: .22em; font-size: .6em; letter-spacing: -.035em; }
@media (max-width: 1023px) {
  #hero-titolo { font-size: clamp(32px, 9.3vw, 56px); }
}
@media (max-width: 767px) {
  #hero-titolo { font-size: clamp(26px, 8.6vw, 44px); }
  #hero-titolo .hero__riga + .hero__riga { font-size: .62em; }
}
@media (max-width: 640px) and (max-height: 720px) {
  #hero-titolo { font-size: clamp(24px, 7.8vw, 34px); }
}

/* voce 11 · le foto vere del magazzino, sotto le quattro provenienze: le schede dei reparti (angoli e filetto), quadrate.
   Da computer 4 per riga, sulla griglia delle provenienze; da telefono una riga che scorre di lato, come le offerte:
   mai foto giganti in colonna */
.magazzino {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(10px, 1.1vw, 16px);
}
.magazzino__voce {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--fondo-scheda);
}
/* il filetto delle schede dei reparti, sopra la foto: si vede anche sui bordi chiari */
.magazzino__voce::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--linea);
  pointer-events: none;
}
.magazzino__foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .magazzino__voce:hover .magazzino__foto { transform: scale(1.05); }
}
/* nella riga che scorre le foto entrano senza spostarsi fuori dalla traccia (come le offerte) */
.js .magazzino .reveal { transform: scale(.96); }
.js .magazzino .reveal.in { transform: none; }
@media (max-width: 767px) {
  .magazzino {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(64vw, 300px);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--margine));
    padding-right: var(--margine);
  }
  .magazzino::-webkit-scrollbar { display: none; }
  .magazzino__voce { scroll-snap-align: start; border-radius: var(--raggio-s); }
}
@media (prefers-reduced-motion: reduce) {
  .js .magazzino .reveal { transform: none; }
  .magazzino__foto { transition: none; }
}

/* voce 10 · la foto in alto di «Chi siamo» riempie la sua scena qualunque forma abbia (la foto vera del magazzino è
   verticale): il punto scelto nel pannello («Tocca la parte più importante») resta in vista, su ogni schermo */
body.pagina-chi-siamo .hero__fondo { aspect-ratio: 1672 / 941; height: auto; object-fit: cover; }

/* 3 Step, secondo giro (05/11) · Chi siamo da computer: la frase in basso a sinistra ora sta sulla foto vera del magazzino
   (scaffali e pallet): dietro di lei un velo bianco morbido tutto suo, come quelli della scena, così si legge a ogni
   larghezza e con qualunque foto la cliente carichi */
@media (min-width: 1024px) {
  body.pagina-chi-siamo .hero__sotto::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -16px -26px -14px -30px;
    background: rgba(255, 255, 255, .9);
    border-radius: 22px;
    filter: blur(12px);
    pointer-events: none;
  }
}