/* ============================================================
   La home del sito
   Nasce dalla M del giro del 9 agosto — il diorama — con dentro
   i due conti scelti fra le dieci strade del 10 (m-scelte, 4) e
   il modulo che si apre nella stanza. Qui in più c'è la testata
   del sito, che nel giro delle varianti non c'era: le home di
   prova avevano solo marchio e telefono perché erano una
   schermata sola e non portavano da nessuna parte.

   La home è una stanza con quattro fotografie sospese a
   profondità diverse. Il puntatore la inclina davvero (rotateX
   e rotateY su un piano in prospettiva) e i pannelli si
   staccano l'uno dall'altro. Quando si indica un conto, la
   stanza si riempie di quel mondo: cambiano le foto, il titolo
   e la riga sotto. Al telefono la stanza continua a respirare
   da sola e i due mondi si alternano.
   ============================================================ */

/* ---------- la testata ----------
   Sta nel flusso, non fissa: la pagina è alta una schermata e
   sotto non si scorre, quindi non c'è niente da cui staccarsi.
   Prende l'aria che prendeva la barra di prima, così la stanza
   non perde altezza. */
.testata {
  position: relative; z-index: 40;
  width: min(1280px, calc(100% - 48px));
  margin: clamp(14px, 2vw, 24px) auto 0;
}
.testata-dentro { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.marchio { line-height: 0; flex: none; }
.marchio img { height: 25px; display: block; }

.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.menu-voci { display: flex; align-items: center; gap: clamp(13px, 1.7vw, 26px); list-style: none; }
.menu-voci a {
  position: relative;
  font-size: 14.5px; font-weight: 650; color: var(--soft);
  text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.menu-voci a:hover { color: var(--ink); }
.menu-voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 3px; border-radius: 2px; background: var(--sun);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.menu-voci a:hover::after { transform: scaleX(1); }

/* il tasto della testata non porta a una pagina dei contatti:
   apre il modulo che sta già qui sotto, dove la bolletta si
   lascia cadere. È l'unico modo di parlarci che il sito offre —
   il numero di telefono non c'è da nessuna parte, si lascia il
   proprio e richiamiamo noi. */
.menu-cta {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 780; color: var(--ink);
  background: var(--sun);
  padding: 11px 22px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 12px 26px -18px rgba(179, 124, 20, .8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.menu-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(179, 124, 20, .75); }

.menu-tasto {
  display: none; flex: none;
  width: 42px; height: 42px; margin-left: auto;
  border: none; background: transparent; cursor: pointer;
  position: relative; border-radius: 12px;
}
/* le tre righe: quella di mezzo è lo span, le altre due i suoi
   pseudo-elementi. I rientri stanno solo sullo span — messi anche
   sui figli si sommerebbero al suo, e sopra e sotto resterebbero
   due trattini di due pixel invece di due righe */
.menu-tasto span, .menu-tasto span::before, .menu-tasto span::after {
  content: ""; position: absolute;
  height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .3s var(--ease), background .25s;
}
.menu-tasto span { top: 20px; left: 10px; right: 10px; }
.menu-tasto span::before, .menu-tasto span::after { left: 0; right: 0; }
.menu-tasto span::before { top: -7px; }
.menu-tasto span::after { top: 7px; }
.menu-tasto.aperto span { background: transparent; }
.menu-tasto.aperto span::before { transform: translateY(7px) rotate(45deg); }
.menu-tasto.aperto span::after { transform: translateY(-7px) rotate(-45deg); }


.scena {
  position: relative;
  align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(168deg, #fffdf6 0%, var(--paper) 46%, #eef6f0 100%);
}

/* ---------- la stanza ---------- */
.palco {
  position: absolute; inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  pointer-events: none;
}
.deriva {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: derivaLenta 22s ease-in-out infinite alternate;
}
@keyframes derivaLenta {
  from { transform: rotateY(-2.4deg) rotateX(1.2deg); }
  to   { transform: rotateY(2.4deg) rotateX(-1.2deg); }
}
.strato {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .9s var(--ease);
}

.pannello {
  position: absolute;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  box-shadow: 0 60px 90px -60px rgba(34, 58, 60, .85);
  background: var(--white);
  animation: posaPannello 1.1s var(--ease) both;
}
.pannello img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .7s var(--ease);
}
.pannello .az { opacity: 0; }
.scena[data-mondo="azienda"] .pannello .fam { opacity: 0; }
.scena[data-mondo="azienda"] .pannello .az { opacity: 1; }

@keyframes posaPannello {
  from { opacity: 0; transform: translateZ(-600px) translateY(30px); }
  to   { opacity: 1; }
}

/* le quattro posizioni: due per lato, profondità diverse così il
   movimento del puntatore le separa davvero */
.p1 { left: 3.5%;  top: 12%;    width: 25%;  aspect-ratio: 4 / 3;  transform: translateZ(-90px);  animation-delay: .15s; }
.p2 { left: 10.5%; bottom: 9%;  width: 19%;  aspect-ratio: 1;      transform: translateZ(-380px); animation-delay: .3s; }
.p3 { right: 7%;   top: 8%;     width: 20%;  aspect-ratio: 1;      transform: translateZ(-330px); animation-delay: .25s; }
.p4 { right: 2.5%; bottom: 11%; width: 26%;  aspect-ratio: 5 / 4;  transform: translateZ(-60px);  animation-delay: .4s; }

/* Seven sta nella stanza come tutto il resto: appoggiato al fianco
   del pannello grande, a una profondità appena davanti alla sua,
   così quando la stanza si inclina si muovono insieme */
.strato .seven {
  position: absolute;
  /* sta a sinistra, appoggiato al fianco del pannello basso: là fuori
     l'alone crema non arriva e i colori gli restano pieni */
  left: 12.5%; bottom: 7%;
  width: clamp(104px, 9.6vw, 138px);
  /* la posa si appoggia con la spalla a quello che ha alla propria
     sinistra: specchiata, la spalla va contro il pannello che sta
     alla sua destra. Serve una comparsa sua perché lo specchio non
     venga cancellato dall'animazione. */
  transform: translateZ(-40px) scaleX(-1);
  filter: drop-shadow(0 28px 26px rgba(34, 58, 60, .26));
  animation: posaSeven 1.1s .55s var(--ease) both;
}
@keyframes posaSeven {
  from { opacity: 0; transform: translateZ(-40px) scaleX(-1) translateY(26px); }
  to   { opacity: 1; transform: translateZ(-40px) scaleX(-1); }
}

.scintilla {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 18px 6px rgba(246, 183, 60, .45);
  animation: fluttua 7s ease-in-out infinite alternate;
}
.s1 { left: 33%; top: 22%; transform: translateZ(-200px); }
.s2 { right: 31%; bottom: 26%; transform: translateZ(-260px); animation-delay: 1.4s; }
.s3 { left: 27%; bottom: 18%; width: 7px; height: 7px; transform: translateZ(-460px); animation-delay: 2.6s; }
@keyframes fluttua { from { translate: 0 -10px; opacity: .5; } to { translate: 0 12px; opacity: 1; } }

/* ---------- il testo davanti ---------- */
.fronte {
  position: relative; z-index: 2;
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  display: flex; justify-content: center;
  padding: clamp(20px, 3vw, 40px) 0;
}
.alone {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: min(820px, 130vw); height: min(720px, 125vh);
  translate: -50% -50%;
  background: radial-gradient(ellipse at center, rgba(253, 252, 247, .97) 0%, rgba(253, 252, 247, .9) 40%, rgba(253, 252, 247, .42) 64%, rgba(253, 252, 247, 0) 82%);
  pointer-events: none;
}
/* la colonna del testo resta stretta: le fotografie stanno ai lati
   e il titolo non le tocca mai, a nessuna larghezza */
.fronte-testo { position: relative; z-index: 1; text-align: center; max-width: 570px; }

/* l'occhiello non ripete il marchio (che sta già in alto a sinistra):
   dice cosa offriamo, e cambia col mondo come tutto il resto della
   stanza — stesso passo del titolo, così i tre pezzi si muovono insieme */
.occhielli { display: grid; justify-items: center; }
.occhielli .eyebrow { grid-area: 1 / 1; transition: opacity .3s var(--ease); }
.e-az { opacity: 0; }
.scena[data-mondo="azienda"] .e-fam { opacity: 0; }
.scena[data-mondo="azienda"] .e-az { opacity: 1; }
.scena[data-mondo="famiglia"] .e-fam,
.scena[data-mondo="azienda"] .e-az { transition-delay: .36s; }

.titoli { display: grid; margin-top: 16px; }
.titoli .disp {
  grid-area: 1 / 1;
  font-size: clamp(34px, 3.5vw, 52px);
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.titoli .disp em { font-style: normal; color: var(--green-deep); }
.t-az { opacity: 0; transform: translateY(10px); }
.scena[data-mondo="azienda"] .t-fam { opacity: 0; transform: translateY(-10px); }
.scena[data-mondo="azienda"] .t-az { opacity: 1; transform: none; }
/* prima esce quello vecchio, poi entra il nuovo: due titoli diversi
   in dissolvenza incrociata si leggerebbero uno sopra l'altro */
.scena[data-mondo="famiglia"] .t-fam,
.scena[data-mondo="azienda"] .t-az { transition-delay: .36s; }

.sotto { display: grid; margin-top: 18px; }
.sotto p {
  grid-area: 1 / 1;
  font-size: clamp(15.5px, 1.7vw, 18px); font-weight: 450; color: var(--soft);
  max-width: 48ch; margin-inline: auto;
  transition: opacity .3s var(--ease);
}
.p-az { opacity: 0; }
.scena[data-mondo="azienda"] .p-fam { opacity: 0; }
.scena[data-mondo="azienda"] .p-az { opacity: 1; }
.scena[data-mondo="famiglia"] .p-fam,
.scena[data-mondo="azienda"] .p-az { transition-delay: .36s; }

.suggerimento { display: block; margin-top: 18px; font-size: 13px; color: var(--soft); opacity: .85; }

/* ---------- la scelta: i due conti ----------
   non si chiede chi sei, si mostra quanto si risparmia da una
   parte e dall'altra: chi legge va dove c'è il suo numero.
   Scelta fra dieci strade nel giro del 10 agosto (m-scelte). */
/* ============================================================
   IL MODULO CHE NASCE DENTRO LA STANZA
   Nessun atterraggio: la scelta si richiude, il paragrafo lascia
   il posto e il foglio cresce da lì, aprendosi dal punto esatto
   che è stato toccato. L'altezza si muove sempre (grid-template-
   rows da 0fr a 1fr), così la colonna resta centrata mentre
   cambia e niente salta di scatto.
   ============================================================ */
.guscio { display: grid; transition: grid-template-rows .62s var(--ease); }
.guscio-dentro { min-height: 0; overflow: hidden; }
.guscio-sotto, .guscio-scelte { grid-template-rows: 1fr; }
.foglio { grid-template-rows: 0fr; }
.scena[data-fase="modulo"] .guscio-sotto,
.scena[data-fase="modulo"] .guscio-scelte { grid-template-rows: 0fr; }
.scena[data-fase="modulo"] .foglio { grid-template-rows: 1fr; }
/* a corsa finita l'ombra deve poter uscire dal contenitore */
.foglio.aperto-fermo .guscio-dentro { overflow: visible; }

/* quello che manca si fa notare da solo, senza cartelli rossi */
.scuoti { animation: scuoti .42s var(--ease); }
@keyframes scuoti {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  55% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}
.scuoti input { border-color: var(--sun); }

.scena[data-fase="modulo"] .posto,
.scena[data-fase="modulo"] .sotto {
  opacity: 0; transform: scale(.97);
  transition: opacity .26s, transform .4s var(--ease);
}
.posto, .sotto { transition: opacity .34s .16s, transform .5s var(--ease); }

/* la stanza arretra e si vela: il testo davanti deve restare la
   cosa più leggibile della schermata mentre si compila */
.strato { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--zoom, 1)); }
.scena[data-fase="modulo"] .strato { --zoom: .93; }

/* col foglio aperto il titolo fa un passo indietro: resta la
   promessa, ma la schermata deve bastare per tutto il modulo */
.titoli .disp { transition: opacity .3s var(--ease), transform .5s var(--ease), font-size .5s var(--ease); }
.scena[data-fase="modulo"] .titoli .disp { font-size: clamp(23px, 2.1vw, 30px); }
/* e la colonna si allarga: con la scelta chiusa lo spazio c'è, e
   il modulo ci sta in una schermata invece di scappare sotto */
.fronte-testo { transition: max-width .55s var(--ease); }
.scena[data-fase="modulo"] .fronte-testo { max-width: 660px; }
.velo {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(253, 252, 247, .72) 0%, rgba(253, 252, 247, .5) 55%, rgba(253, 252, 247, .28) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .55s var(--ease);
}
.scena[data-fase="modulo"] .velo { opacity: 1; }

/* ---------- il foglio ---------- */
.modulo {
  position: relative;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: clamp(17px, 2vw, 24px) clamp(17px, 2.2vw, 26px) clamp(16px, 1.9vw, 21px);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  text-align: left;
  box-shadow: 0 50px 80px -50px rgba(34, 58, 60, .8);
  /* l'apertura vera: il foglio si srotola dalla larghezza esatta
     di quello che è stato toccato (le misure arrivano dal
     copione; in verticale parte chiuso e scende) */
  clip-path: inset(0 var(--dx, 32%) 100% var(--sx, 32%) round 100px);
  opacity: .25;
}
.foglio.aperto .modulo {
  clip-path: inset(0px 0px 0px 0px round 22px);
  opacity: 1;
  transition: clip-path .62s var(--ease), opacity .34s;
}
.mod-chiudi {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent; color: var(--soft);
  cursor: pointer; display: grid; place-items: center;
  transition: background .25s, color .25s;
}
.mod-chiudi:hover { background: var(--green-soft); color: var(--green-deep); }

.mod-occhio {
  font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--green);
}
.mod-titolo { font-size: clamp(21px, 2.2vw, 26px); margin-top: 4px; }

/* i campi arrivano uno dietro l'altro, non tutti insieme */
.modulo .campo, .modulo .bolletta, .modulo .consenso, .modulo .mod-fondo {
  opacity: 0; transform: translateY(9px);
}
.foglio.aperto .modulo .campo,
.foglio.aperto .modulo .bolletta,
.foglio.aperto .modulo .consenso,
.foglio.aperto .modulo .mod-fondo {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  transition-delay: calc(.18s + var(--i, 0) * .055s);
}

.mod-campi {
  margin-top: 13px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.campo-largo { grid-column: 1 / -1; }
.campo { display: block; }
.campo > span {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 750; letter-spacing: .04em; color: var(--soft);
}
.campo input {
  width: 100%;
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .25s, background .25s;
}
.campo input::placeholder { color: #9aa8a1; }
.campo input:focus { outline: none; border-color: var(--green); background: var(--white); }

/* ---------- la bolletta ---------- */
.bolletta { margin-top: 11px; }
.bolletta-vuota {
  display: grid; justify-items: center; gap: 2px;
  padding: 13px 16px;
  border: 2px dashed var(--line); border-radius: 16px;
  color: var(--soft); text-align: center;
  transition: border-color .3s, background .3s, color .3s;
}
.bolletta-vuota svg { color: var(--green); opacity: .8; }
.bolletta-vuota b { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.bolletta-vuota span { font-size: 12.5px; max-width: 42ch; }
.bolletta-sfoglia {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 780; color: var(--green-deep);
  border-bottom: 1.5px solid var(--sun);
}
.bolletta:hover .bolletta-vuota { border-color: var(--green); background: rgba(228, 242, 234, .35); }
.bolletta-vuota[hidden], .bolletta-piena[hidden] { display: none; }
/* al telefono non si trascina niente: si allega, e va bene anche
   una fotografia della bolletta */
.dice-tel { display: none; }
.bolletta-piena {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  background: var(--green-soft); border-radius: 16px;
  color: var(--green-deep);
  animation: entraBolletta .45s var(--ease) both;
}
@keyframes entraBolletta { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.bolletta-nome { font-size: 14.5px; font-weight: 780; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolletta-togli {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 750; color: var(--soft);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- il fondo ----------
   le spunte (.consenso.spunte) le disegna base.css; qui solo il loro
   arrivo coi campi, più su */
/* il tasto sta da solo, al centro: la nota va sotto, mai di fianco */
.mod-fondo {
  margin-top: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center;
}
.mod-invia {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 15.5px; font-weight: 800;
  color: #fff; background: var(--ink);
  padding: 15px 30px; border-radius: 100px;
  min-width: min(100%, 260px);
  transition: background .3s, transform .3s var(--ease);
}
.mod-invia:hover { background: var(--green-deep); transform: translateY(-2px); }
.mod-nota { max-width: 46ch; font-size: 12.5px; line-height: 1.45; color: var(--soft); text-wrap: balance; }

/* ---------- la ricevuta ---------- */
.ricevuta {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 30px);
  background: var(--white);
  border: 1.5px solid var(--line); border-radius: 22px;
  box-shadow: 0 50px 80px -50px rgba(34, 58, 60, .8);
  animation: entraRicevuta .55s var(--ease) both;
}
@keyframes entraRicevuta { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }
.ricevuta-bollo {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
}
.ricevuta h2 { font-size: clamp(22px, 2.3vw, 28px); }
.ricevuta p { margin-top: 8px; font-size: 14.5px; color: var(--soft); }
.ricevuta-torna {
  margin-top: 16px; border: none; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 780; color: var(--green-deep);
  background: none; border-bottom: 2px solid var(--sun); padding-bottom: 2px;
}

/* ---------- la seconda uscita ---------- */
.esci { display: grid; justify-items: center; margin-top: 18px; }
.esci .esplora {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--soft);
  text-decoration: none;
  transition: opacity .3s var(--ease), color .3s, gap .3s var(--ease);
}
.esci .esplora:hover { color: var(--green-deep); gap: 12px; }
.es-az { opacity: 0; pointer-events: none; }
.scena[data-mondo="azienda"] .es-fam { opacity: 0; pointer-events: none; }
.scena[data-mondo="azienda"] .es-az { opacity: 1; pointer-events: auto; }
.scena[data-mondo="famiglia"] .es-fam,
.scena[data-mondo="azienda"] .es-az { transition-delay: .36s; }

.scena[data-fase="modulo"] .suggerimento { opacity: 0; }

/* ---------- il versatoio: la bolletta si lascia cadere ovunque ---------- */
.versatoio {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(34, 58, 60, .28);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
body.versa .versatoio { opacity: 1; }
.versatoio-dentro {
  display: grid; justify-items: center; gap: 4px;
  padding: clamp(30px, 6vw, 52px) clamp(34px, 8vw, 74px);
  background: rgba(253, 252, 247, .97);
  border: 2px dashed var(--green);
  border-radius: 26px;
  color: var(--soft); text-align: center;
  transform: scale(.96);
  transition: transform .35s var(--ease);
}
body.versa .versatoio-dentro { transform: none; }
.versatoio-dentro svg { color: var(--green); }
.versatoio-dentro b { font-size: clamp(19px, 2.4vw, 24px); font-weight: 830; color: var(--ink); letter-spacing: -.02em; }
.versatoio-dentro span { font-size: 13.5px; }

.posto {
  margin-top: clamp(26px, 3vw, 34px);
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px;
}

/* le due carte stanno strette: allargandosi arrivano sotto le
   fotografie di lato, che su un portatile sono a un palmo dalla
   colonna del testo */
.v4 { gap: 10px; max-width: 452px; margin-inline: auto; }
.v4-conto {
  flex: 1 1 180px;
  display: block; text-align: left;
  padding: 11px 14px 11px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-left: 3.5px solid var(--green);
  border-radius: 5px 15px 15px 5px;
  text-decoration: none;
  box-shadow: 0 24px 40px -36px rgba(34, 58, 60, .85);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.v4-conto.alt { border-left-color: var(--sun); }
.v4-cifra {
  display: block;
  font-size: clamp(22px, 2.2vw, 27px); font-weight: 850;
  font-stretch: 112%; letter-spacing: -.03em; line-height: 1.05;
  color: var(--green-deep);
}
.v4-conto.alt .v4-cifra { color: #9a6a06; }
.v4-riga { display: block; font-size: 11.5px; color: var(--soft); margin-top: 1px; }
.v4-vai {
  display: inline-block; margin-top: 7px;
  font-size: 12.5px; font-weight: 800; color: var(--ink);
  border-bottom: 2px solid var(--sun); padding-bottom: 1px;
}
.v4-conto:hover { transform: translateY(-4px); box-shadow: 0 34px 50px -34px rgba(34, 58, 60, .7); }

/* fra i 940 e i 1150 le fotografie si stringono addosso alla
   colonna: le due carte si tolgono di mezzo prima che si tocchino */
@media (min-width: 941px) and (max-width: 1150px) {
  .v4 { max-width: 400px; }
  .v4-cifra { font-size: 21px; }
}

/* ---------- telefono: la stanza scende sotto il testo ---------- */
@media (max-width: 940px) {
  /* la testata si richiude nel tasto: le quattro pagine e l'analisi
     scendono in un foglio che sta sopra la stanza e non le toglie
     un pixel di altezza */
  .menu-tasto { display: block; }
  .menu {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border: 1px solid var(--line); border-radius: 20px;
    padding: 10px;
    box-shadow: 0 30px 56px -30px rgba(34, 58, 60, .5);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
  }
  .menu.aperto { opacity: 1; transform: none; pointer-events: auto; }
  .menu-voci { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-voci a { display: block; padding: 13px 14px; border-radius: 12px; font-size: 16px; color: var(--ink); }
  .menu-voci a::after { display: none; }
  .menu-voci a:active { background: var(--green-soft); }
  .menu-cta {
    margin: 10px 4px 4px; padding: 14px; font-size: 15.5px; border-radius: 12px;
  }

  /* al telefono la stanza scende sotto le parole: prima si legge,
     poi si guarda. L'ordine sta qui, non nel documento. */
  .scena { flex-direction: column; justify-content: flex-start; }
  .fronte { order: 1; padding: clamp(18px, 5vw, 30px) 0 0; flex: none; }
  .fronte-testo { max-width: 100%; }
  .titoli .disp { font-size: clamp(31px, 8.2vw, 42px); }
  .sotto p { font-size: 15.5px; }
  .posto { gap: 10px; }
  .v4-conto { flex: 1 1 100%; }
  .dice-desk { display: none; }
  .dice-tel { display: block; }
  .mod-campi { grid-template-columns: 1fr; }
  .modulo { border-radius: 18px; }
  .mod-fondo { flex-direction: column; align-items: stretch; }
  .mod-invia { width: 100%; }
  /* in colonna la base di 200 px diventerebbe altezza: un vuoto sotto il testo */
  .mod-nota { flex: none; text-align: center; }
  .esci .esplora { font-size: 13px; }

  .palco { order: 2; position: relative; inset: auto; flex: 1 1 auto; width: 100%; min-height: 32svh; }
  .alone { display: none; }
  /* al telefono i quattro pannelli si stringono in un grappolo,
     sempre a profondità diverse: la stanza resta tridimensionale */
  .p1 { left: 4%;  top: 14%;    width: 40%; }
  .p2 { left: 20%; bottom: 6%;  width: 30%; }
  .p3 { right: 6%; top: 8%;     width: 30%; }
  .p4 { right: 3%; bottom: 10%; width: 42%; }
  /* al telefono va nell'angolo in basso a sinistra, con la spalla
     contro il pannello quadrato: in mezzo coprirebbe le foto */
  .strato .seven { left: 1%; bottom: 2%; width: 78px; }
  .scintilla { display: none; }
  .suggerimento { display: none; }
}
@media (max-width: 940px) and (min-height: 780px) {
  .palco { min-height: 44svh; }
}

@media (prefers-reduced-motion: reduce) {
  .deriva, .scintilla { animation: none; }
  .pannello { animation: none; opacity: 1; }
  .strato .seven { animation: none; opacity: 1; }
}

/* ---------- il fondo sotto la prima schermata ----------
   La stanza resta alta quanto lo schermo meno la testata, come
   prima: il fondo arriva scorrendo, non la schiaccia */
body.schermo-unico .scena { min-height: calc(100svh - 62px); }
body.schermo-unico > .fondo { flex: none; }
@media (max-width: 940px) { body.schermo-unico .scena { min-height: calc(100svh - 58px); } }
@media (max-width: 720px) { body.schermo-unico .scena { min-height: calc(100svh - 56px); } }