/* ============================================================
   Per l'azienda — variante 4: l'incrocio
   Le parti migliori delle tre, ognuna al posto che le spetta:
   il titolo della 2 allargato alle tre leve («comprarla meglio,
   consumarne meno, produrla tu»), i mestieri della 1 come
   oggetto d'apertura, la pila della fattura al posto della
   fotografia nel capitolo «quello che paghi», e il tabellone
   dei bandi promosso a fascia intera.
   ============================================================ */

/* ---------- la spina: il titolo della 2, i mestieri della 1 ---------- */
.m1 { padding-bottom: clamp(44px, 6vw, 80px); }

.m1-testa { max-width: 34ch; }
.m1-testa .eyebrow { margin-bottom: 14px; }
.m1-testa h1 { font-size: clamp(30px, 3.6vw, 52px); }
.m1-testa h1 em { font-style: normal; color: var(--green-deep); }
.m1-riga { margin-top: 16px; font-size: clamp(16px, 1.6vw, 18px); color: var(--soft); max-width: 56ch; }
@media (min-width: 941px) {
  .m1-testa { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(24px, 4vw, 70px); align-items: end; }
  .m1-testa .eyebrow { grid-column: 1 / -1; }
  .m1-riga { margin-top: 0; padding-bottom: 6px; }
}

/* ---------- le insegne appese ----------
   Ogni mestiere è l'insegna della sua bottega, appesa a un palo di
   legno con due catenelle a maglie. La fisica sta in spina.js, ed è
   quella vera di un'insegna su due catenelle: la tavola non ruota,
   ondeggia restando in piano come un'altalena, e sono le catenelle
   a inclinarsi, ognuna ancorata al suo punto del palo.
   Il palo ha due modi, e li sceglie spina.js col righello in mano:
   se le sei tavole ci stanno tutte in fila è il corrimano unico che
   attraversa la pagina, con le insegne vicine (modo «corrimano»);
   se non ci stanno, i pali spuntano dai bordi, uno da sinistra e
   uno da destra, con quante insegne ne reggono (modo «pali»). Il
   telefono sta sempre nel secondo modo. */
.a-insegne { display: block; margin-top: clamp(22px, 3vw, 34px); --dentro: 16px; --coda: 10px; }
.a-livello + .a-livello { margin-top: 38px; }
.a-trave {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding-top: 45px;
}
.a-palo {
  position: absolute; left: 0; right: 0; top: 0;
  height: 14px; border-radius: 7px;
  background:
    linear-gradient(90deg,
      rgba(90, 58, 28, .22), transparent 12%,
      rgba(255, 232, 200, .1) 30%, transparent 46%,
      rgba(90, 58, 28, .14) 62%, transparent 78%,
      rgba(90, 58, 28, .24)),
    linear-gradient(180deg, #c99a63, #a87947 45%, #8a5f33 80%, #6f4b26);
  box-shadow: 0 3px 5px rgba(34, 58, 60, .3), inset 0 1.5px 0 rgba(255, 235, 205, .4), inset 0 -2px 3px rgba(60, 36, 12, .35);
}
/* il gancio è il pezzo di legno da cui pende la tavola */
.a-gancio { position: relative; display: inline-flex; flex: none; }
.a-tocca { display: none; }
.a-insegna {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 780; color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f3f2e8);
  border: 1.5px solid #d5dccf; border-radius: 10px;
  padding: 13px 14px; cursor: pointer;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8), inset 0 0 0 4.5px rgba(34, 58, 60, .08), 0 16px 22px -16px rgba(34, 58, 60, .75);
  transform: rotate(var(--r, 0deg));
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
  will-change: transform;
}
.a-catena {
  position: absolute; top: -31px; width: 3px; height: 33px;
  background: repeating-linear-gradient(180deg, #8a9a90 0 4px, rgba(138, 154, 144, .28) 4px 6.5px);
  border-radius: 2px;
  transform-origin: 50% 100%;
  will-change: transform;
}
.a-catena.sx { left: 24%; }
.a-catena.dx { right: 24%; }
.a-vite {
  position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6ebe4, #9fada4 70%, #7c8b82);
  box-shadow: inset 0 -1px 1px rgba(34, 58, 60, .5);
}
.a-vite.sx { left: calc(24% - 2px); }
.a-vite.dx { right: calc(24% - 2px); }
.a-insegna .icona { width: 19px; height: 19px; color: var(--green-deep); transition: color .25s; }
.a-insegna:hover { border-color: var(--green); }
.a-insegna[aria-selected="true"] {
  background: linear-gradient(180deg, #2b4649, #1c3134);
  border-color: var(--ink); color: var(--sun);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), inset 0 0 0 4.5px rgba(246, 183, 60, .35), 0 18px 26px -16px rgba(22, 40, 43, .95);
}
.a-insegna[aria-selected="true"] .icona { color: var(--sun); }
.a-insegna[aria-selected="true"] .a-vite { box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .6), 0 0 4px rgba(246, 183, 60, .5); }

.m1-griglia {
  margin-top: clamp(16px, 2.2vw, 26px);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px); align-items: stretch;
}
.m1-scena {
  background: var(--white); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(16px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 40px 70px -55px rgba(34, 58, 60, .8);
}
.m1-scena-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.m1-scena-testa b { font-size: clamp(17px, 1.8vw, 21px); font-weight: 830; letter-spacing: -.02em; }
.m1-scena-testa span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.m1-grafico { width: 100%; height: auto; flex: 1; }
.m1-legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--soft); }
.m1-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.m1-legenda i { width: 14px; height: 14px; border-radius: 4px; }
.m1-legenda .l-consumo { background: transparent; border-top: 3px solid var(--ink); height: 0; border-radius: 0; }
.m1-legenda .l-sole { background: rgba(246, 183, 60, .38); }
.m1-legenda .l-insieme { background: rgba(75, 160, 120, .55); }

.m1-carta {
  background: var(--ink); color: #fff; border-radius: 24px;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column;
  box-shadow: 0 40px 70px -50px rgba(34, 58, 60, 1);
}
.m1-ore { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.m1-nome { margin-top: 8px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 830; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.05; }
.m1-detto { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.m1-sai {
  margin-top: 14px; padding: 13px 15px;
  background: rgba(255, 255, 255, .07); border-left: 3px solid var(--sun); border-radius: 6px 14px 14px 6px;
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .8);
}
.m1-sai b { color: var(--sun); font-weight: 800; }
.m1-leve { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.m1-leva-titolo { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.m1-leva {
  font-size: 13px; font-weight: 750; color: var(--ink);
  background: var(--sun); border-radius: 100px; padding: 7px 14px;
}
.m1-carta .go { margin-top: auto; padding-top: 18px; color: var(--sun); }
.m1-carta.cambia .m1-ore, .m1-carta.cambia .m1-nome, .m1-carta.cambia .m1-detto,
.m1-carta.cambia .m1-sai, .m1-carta.cambia .m1-leve { opacity: 0; }
.m1-ore, .m1-nome, .m1-detto, .m1-sai, .m1-leve { transition: opacity .22s ease; }

/* ---------- la pila della fattura, dentro il primo capitolo ---------- */
.cap-lato-fattura { display: grid; justify-items: center; gap: 6px; }
.f2-pila {
  position: relative;
  width: min(400px, 92%);
  height: clamp(300px, 30vw, 380px);
  perspective: 1400px;
}
.f2-strato {
  position: absolute; left: 50%; top: 58%;
  width: 100%; max-width: 380px; height: 168px;
  margin: -84px 0 0 -50%;
  text-align: left; cursor: pointer;
  font-family: inherit;
  background: var(--white);
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 15px 18px;
  box-shadow: 0 34px 44px -30px rgba(34, 58, 60, .55);
  transform: rotateX(56deg) rotateZ(-38deg) translateZ(calc(var(--i) * 54px));
  transition: transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.f2-strato:hover { transform: rotateX(56deg) rotateZ(-38deg) translateZ(calc(var(--i) * 54px + 16px)); border-color: var(--green); }
.f2-strato.attivo {
  transform: rotateX(56deg) rotateZ(-38deg) translateZ(calc(var(--i) * 54px + 40px)) translateX(24px) translateY(-24px);
  border-color: var(--sun);
  box-shadow: 0 44px 54px -30px rgba(34, 58, 60, .7);
}
/* nome in alto a sinistra, etichetta in alto a destra: la fascia
   alta è l'unica che resta scoperta quando la pila è chiusa */
.f2-strato b { display: block; font-size: 16.5px; font-weight: 830; letter-spacing: -.02em; color: var(--ink); padding-right: 150px; }
.f2-strato-tag {
  position: absolute; top: 14px; right: 15px;
  max-width: 140px; text-align: center; line-height: 1.2;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  background: #eef1ec; color: var(--soft);
}
.f2-strato-tag.oro { background: var(--sun); color: var(--ink); }
.f2-righe { display: grid; gap: 7px; margin-top: 15px; }
.f2-righe i { display: block; height: 7px; border-radius: 4px; background: #edf0ea; }
.f2-strato[data-strato="materia"] .f2-righe i { background: var(--sun-soft); }

.f2-manopole { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 2px; }
.f2-manopole-titolo { width: 100%; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); }
.f2-manopola {
  display: grid; gap: 1px; text-align: left;
  font-family: inherit; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 11px 16px 11px 38px; position: relative;
  transition: border-color .25s, transform .3s var(--ease);
}
.f2-manopola::before {
  content: ""; position: absolute; left: 13px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; border: 3.5px solid var(--green);
  background: conic-gradient(var(--green) 0 25%, transparent 25% 100%);
}
.f2-manopola:hover { border-color: var(--green); transform: translateY(-2px); }
.f2-manopola.attivo { border-color: var(--sun); background: var(--sun-soft); }
.f2-manopola b { font-size: 14px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.f2-manopola span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }

/* la carta dello strato vive nel testo del capitolo, al posto
   dell'elenco puntato: è lei che risponde al clic sulla pila */
.f2-carta {
  margin-top: 18px;
  background: var(--white); border: 1.5px solid var(--line);
  border-left: 4px solid var(--sun);
  border-radius: 6px 18px 18px 6px;
  padding: 16px 20px;
  min-height: 148px;
}
.f2-tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
  background: var(--green-soft); color: var(--green-deep);
}
.f2-tag.oro { background: var(--sun-soft); color: #9a7013; }
.f2-nome { display: block; margin-top: 8px; font-size: clamp(17px, 1.7vw, 20px); font-weight: 830; letter-spacing: -.02em; }
.f2-detto { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--soft); }
.f2-carta.cambia .f2-tag, .f2-carta.cambia .f2-nome, .f2-carta.cambia .f2-detto { opacity: 0; }
.f2-tag, .f2-nome, .f2-detto { transition: opacity .2s ease; }

/* ---------- il tabellone dei bandi, fascia intera ---------- */
.t3-griglia {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px); align-items: start;
}
.t3-tabellone {
  background: #16282b;
  border-radius: 24px;
  padding: 10px 10px 12px;
  box-shadow: 0 50px 80px -55px rgba(22, 40, 43, 1), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.t3-intesta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.t3-agg { color: var(--sun); }
.t3-riga {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) auto;
  gap: 8px 16px; align-items: center;
  text-align: left; cursor: pointer; font-family: inherit;
  background: transparent; border: none; border-top: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid transparent;
  padding: 13px 18px;
  transition: background .25s, border-left-color .25s;
}
.t3-riga:hover { background: rgba(255, 255, 255, .05); }
.t3-riga.attiva { background: rgba(255, 255, 255, .07); border-left-color: var(--sun); }
.t3-m { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.t3-chi { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .55); }
.t3-stato { display: inline-flex; gap: 2px; justify-self: end; white-space: nowrap; }
.t3-stato i {
  display: inline-grid; place-items: center;
  min-width: 15px; height: 21px; padding: 0 1px;
  font-style: normal; font-size: 12px; font-weight: 850;
  background: #0d1b1d; border-radius: 3.5px;
  box-shadow: inset 0 -6px 8px -6px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.t3-stato i.vuota { background: transparent; box-shadow: none; min-width: 7px; }
.t3-stato.aperto i { color: #7fe0a6; }
.t3-stato.attesa i { color: var(--sun); }
.t3-stato.chiuso i { color: #74898b; }

.t3-carta {
  position: sticky; top: 86px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 24px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 40px 70px -55px rgba(34, 58, 60, .8);
}
.t3-bollino {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.t3-bollino.aperto { background: var(--green-soft); color: var(--green-deep); }
.t3-bollino.attesa { background: var(--sun-soft); color: #9a7013; }
.t3-bollino.chiuso { background: #e6e9e3; color: var(--soft); }
.t3-nome { display: block; margin-top: 10px; font-size: clamp(20px, 2vw, 25px); font-weight: 830; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.08; }
.t3-detto { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.t3-carta .go { margin-top: 16px; }
.t3-nota { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--soft); }
.t3-carta.cambia .t3-bollino, .t3-carta.cambia .t3-nome, .t3-carta.cambia .t3-detto, .t3-carta.cambia .go { opacity: 0; }
.t3-bollino, .t3-nome, .t3-detto, .t3-carta .go { transition: opacity .2s ease; }

/* la riga d'invito che vale solo al telefono */
.m1-riga.solo-telefono { display: none; }
.m1-riga.solo-telefono b { color: var(--ink); }

/* ---------- modo «pali»: i bracci dai bordi ----------
   Quando le sei tavole non stanno in fila su un corrimano solo, il
   palo si spezza e spunta dai bordi: uno da sinistra, uno da destra,
   con quante insegne ne regge. È il modo di casa del telefono, ed è
   anche il ripiego del desktop stretto — mai due bracci distesi uno
   sotto l'altro, che allontanano le insegne invece di tenerle
   vicine. Il palo finisce appena oltre l'ultima tavola. */
.a-insegne.pali { margin-inline: -32px; margin-top: clamp(14px, 3vw, 24px); }
.a-insegne.pali .a-livello {
  display: flex;
  max-height: 240px; overflow: visible;
  transition: max-height .5s var(--ease), opacity .3s ease;
}
.a-insegne.pali .a-livello.destra { justify-content: flex-end; }
/* qui lo spazio fra un palo e l'altro lo fa la trave, non i margini */
.a-insegne.pali .a-livello + .a-livello { margin-top: 0; }
.a-insegne.pali .a-trave { gap: 0; padding: 38px 0 14px; }
.a-insegne.pali .sinistra .a-trave { padding-left: var(--dentro); padding-right: var(--coda); }
.a-insegne.pali .destra .a-trave { padding-left: var(--coda); padding-right: var(--dentro); }
.a-insegne.pali .a-gancio {
  display: block; max-width: 900px;
  transition: max-width .45s var(--ease), margin .45s var(--ease), opacity .3s ease;
}
.a-insegne.pali .a-gancio + .a-gancio { margin-left: clamp(30px, 6vw, 80px); }
/* il palo occupa tutta la trave: parte dal bordo dello schermo e
   finisce appena oltre l'ultima tavola */
.a-insegne.pali .a-palo {
  top: 3px; height: 12px;
  background:
    linear-gradient(90deg, rgba(90, 58, 28, .22), transparent 18%, rgba(255, 232, 200, .12) 42%, transparent 66%, rgba(90, 58, 28, .2)),
    linear-gradient(180deg, #c99a63, #a87947 45%, #8a5f33 80%, #6f4b26);
  box-shadow: inset 0 1.5px 0 rgba(255, 235, 205, .4), inset 0 -2px 3px rgba(60, 36, 12, .35);
}
/* la piastra a muro: il palo non galleggia, esce da qualcosa */
.a-insegne.pali .a-palo::before {
  content: ""; position: absolute; top: -5px; width: 9px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8fa096, #66776e 60%, #4e5f57);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.a-insegne.pali .sinistra .a-palo { border-radius: 0 6px 6px 0; }
.a-insegne.pali .destra .a-palo { border-radius: 6px 0 0 6px; }
.a-insegne.pali .sinistra .a-palo::before { left: 0; }
.a-insegne.pali .destra .a-palo::before { right: 0; }
/* qui le tavole non proiettano ombra: resta la cornice a rilievo */
.a-insegne.pali .a-insegna { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8), inset 0 0 0 4.5px rgba(34, 58, 60, .08); }
.a-insegne.pali .a-insegna[aria-selected="true"] { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), inset 0 0 0 4.5px rgba(246, 183, 60, .35); }
.a-insegne.pali .a-vite { box-shadow: inset 0 -1px 1px rgba(34, 58, 60, .45); }

/* ---------- Seven si appoggia al consenso ----------
   alle spunte, sopra il tasto (dal 1/10). La posizione nasce dalla
   riga della prima spunta, non dall'altezza del form: se campi e
   testi vanno a capo, Seven scende insieme a lei. */
.modulo-scena { position: relative; isolation: isolate; }
.modulo-scena .modulo { position: relative; z-index: 1; overflow: visible; }
.consenso-scena {
  --seven-w: clamp(188px, 15vw, 218px);
  position: relative;
  margin-top: 18px;   /* lo spazio dai campi: prima lo davano l'informativa e il filo */
}
/* più forte di .modulo .consenso.spunte (base.css), se no lo spazio raddoppia */
.modulo .consenso-scena .consenso.spunte { position: relative; z-index: 3; margin-top: 0; }
.seven-modulo {
  position: absolute;
  z-index: 2;
  top: calc(var(--seven-w) * -.57);
  left: calc(var(--seven-w) * -.79);
  width: var(--seven-w);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 22px 22px rgba(34, 58, 60, .2));
}

/* ---------- telefonino ----------
   Il meccanismo non cambia mai: sono sempre le sei insegne, con le
   loro catenelle e il loro dondolio; qui vale sempre il modo pali,
   al massimo due per braccio. Scelto il mestiere le altre si
   ritirano e lo spazio va tutto alla bottega; un tocco sull'insegna
   rimasta e ricalano. */
@media (max-width: 940px) {
  /* con la bottega ancora chiusa la fascia non deve lasciare una
     campata di niente sotto l'ultimo palo */
  .m1 { padding-bottom: clamp(26px, 4vw, 48px); }
  .m1-riga { display: none; }
  .m1-riga.solo-telefono { display: block; }
  /* qui sotto non c'è la seconda colonna del desktop: il titolo si
     prende tutta la riga invece di lasciarla vuota a destra */
  .m1-testa { max-width: none; }
  .m1-testa h1 { font-size: clamp(27px, 5.8vw, 46px); }
  /* e la riga sotto fa lo stesso: nessuna misura corta che lasci il
     margine destro vuoto, il corpo cresce con lo schermo */
  .m1-riga.solo-telefono { max-width: none; font-size: clamp(16px, 2.6vw, 23px); }

  /* la tavola è larga quanto la scritta, e al telefono un filo più
     raccolta */
  .a-insegna { font-size: 14px; padding: 12px 16px; }

  /* scelta fatta: i livelli che non c'entrano si ritirano tutti
     interi, e sul palo rimasto l'insegna vicina si ritira di lato —
     il palo si accorcia dietro di lei */
  .a-insegne.scelta .a-livello { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
  .a-insegne.scelta .a-livello.acceso { max-height: 240px; opacity: 1; overflow: visible; pointer-events: auto; }
  .a-insegne.scelta .a-gancio { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; pointer-events: none; }
  .a-insegne.scelta .a-gancio.eletta { max-width: 900px; opacity: 1; overflow: visible; pointer-events: auto; }
  /* l'invito a farle ricalare sta in coda alla scritta, sulla stessa
     tavola: l'insegna si allunga di quel tanto */
  .a-insegne.scelta .eletta .a-tocca {
    display: inline-flex; margin-left: 4px; padding: 4px 10px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sun); background: rgba(246, 183, 60, .14);
    border: 1px solid rgba(246, 183, 60, .45); border-radius: 100px;
  }
  /* la griglia diventa la bottega: chiusa all'arrivo, entra da
     sotto quando si sceglie l'insegna — prima la scena, poi la carta */
  .m1-griglia {
    grid-template-columns: 1fr;
    overflow: hidden; max-height: 0; margin-top: 0;
    transition: max-height .6s var(--ease), margin-top .6s var(--ease);
  }
  .m1-griglia.aperta { max-height: 1700px; margin-top: 16px; }
  .m1-scena, .m1-carta { opacity: 0; transform: translateY(22px); transition: opacity .45s ease, transform .55s var(--ease); }
  .m1-griglia.aperta .m1-scena { opacity: 1; transform: none; transition-delay: .1s; }
  .m1-griglia.aperta .m1-carta { opacity: 1; transform: none; transition-delay: .24s; }
  /* la pila ruotata sconfinava sopra il paragrafo che la precede:
     le si dà l'aria che la sua prospettiva occupa davvero */
  .cap-lato-fattura { margin-top: 34px; }
  .f2-pila { height: 290px; }
  .f2-strato { max-width: 330px; height: 150px; margin-top: -75px; }
  .t3-griglia { grid-template-columns: 1fr; }
  .t3-riga { grid-template-columns: minmax(0, 1fr) auto; }
  .t3-chi { grid-column: 1 / -1; }
  .t3-stato i { min-width: 13px; height: 19px; font-size: 11px; }
  .t3-carta { position: static; }
  .consenso-scena {
    --seven-w: clamp(112px, 22vw, 150px);
    min-height: calc(var(--seven-w) * .92);
    margin-top: calc(var(--seven-w) * .55);
    padding-left: calc(var(--seven-w) * .72);
  }
  .seven-modulo { top: calc(var(--seven-w) * -.57); left: calc(var(--seven-w) * -.07); }
}

/* ---------- telefono stretto: le cure dedicate ---------- */
@media (max-width: 720px) {
  /* qui la colonna del testo sta a 16px dal bordo: i pali seguono */
  .a-insegne.pali { margin-inline: -16px; }
  /* la legenda del grafico su due colonne ordinate, non a capo
     dove capita */
  .m1-legenda { gap: 8px 14px; font-size: 12px; }
  .m1-scena { padding: 14px 14px 12px; border-radius: 18px; }
  .m1-scena-testa b { font-size: 16px; }
  .m1-carta { border-radius: 18px; }
  .consenso-scena {
    --seven-w: clamp(96px, 31vw, 124px);
    padding-left: calc(var(--seven-w) * .7);
  }
  .seven-modulo { left: calc(var(--seven-w) * -.07); }
}

@media (prefers-reduced-motion: reduce) {
  .a-gancio, .m1-griglia, .m1-scena, .m1-carta { transition: none; }
}