/* Dimora — landing. Un foglio solo, nessun passo di build.
   Telefono prima: le regole senza media query valgono per il telefono,
   le altre aggiungono a 640, 768, 1024, 1280 px; l'apertura e la barra che segue cambiano a 1200/1201 px.
   Fino a 640 px un blocco suo, in fondo («Sul telefono, fino a 640 px»): righe che scorrono e meno peso. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fondo: #F2F5F0;
  --inchiostro: #1C3A2E;
  --muto: #55655B;
  --testo-storia: #3F4F45;
  --verde: #2E6E4E;
  --verde-scuro: #1C3A2E;
  --menta: #E3EFE7;
  --menta-testo: #1F5A3E;
  --su-scuro: #CFE3D6;
  --verde-chiaro: #9FD1B4;
  --bordo: #CFDACE;
  --bordo-tenue: #DDE5DA;
  --bordo-mock: #E4EBE2;
  --grigio: #E7ECE6;
  --ambra-fondo: #FFF6E9;
  --ambra: #8A4B00;
  --neutro: #F0F3EF;
  --errore: #B3261E;
  --gutter: 16px;
  --sezione-y: 48px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --sezione-y: 88px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--fondo);
  color: var(--inchiostro);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img { max-width: 100%; }
a { color: var(--verde); }
a:hover { color: var(--inchiostro); }
h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
p { overflow-wrap: break-word; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 6px;
}
.scuro a:focus-visible, .scuro button:focus-visible { outline-color: var(--verde-chiaro); }

.nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.contenitore { width: min(calc(100% - 2 * var(--gutter)), 1248px); margin-inline: auto; }

/* ---------- Stato della pagina ----------
   data-stato (sul body, scritto a mano): "in arrivo" | "aperta". Funziona anche senza JavaScript.
   data-aspetto (sul body, scritto dallo script): "prima" | "dopo" | "aperta".
   Senza script non c'è data-aspetto: niente conto alla rovescia, niente frasi con la data. */
body:not([data-stato="aperta"]) .v-aperta { display: none !important; }
body[data-stato="aperta"] .v-arrivo { display: none !important; }
body:not([data-aspetto="prima"]) .v-prima { display: none !important; }
body:not([data-aspetto="dopo"]) .v-dopo { display: none !important; }
body[data-aspetto="dopo"] .v-nondopo { display: none !important; }
body[data-aspetto] .v-senza-tempo { display: none !important; }

/* I moduli: senza script il campo è spento e al posto del pulsante c'è la spiegazione. */
body:not([data-moduli]) .v-js-modulo { display: none !important; }
body[data-moduli] .modulo-senza-js { display: none !important; }

.testo-lungo { display: none; }
@media (min-width: 600px) { .testo-lungo { display: inline; } }

/* ---------- Pulsanti e campi ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { color: #fff; }
.btn-chiaro { background: #fff; color: var(--inchiostro); border: 1px solid var(--bordo); }
.btn-chiaro:hover { color: var(--inchiostro); }
.btn-menta { background: var(--menta); color: var(--inchiostro); font-weight: 800; }
.btn-menta:hover { color: var(--inchiostro); }
.btn:disabled { cursor: progress; opacity: .75; }
.btn-modulo { min-height: 54px; padding: 0 24px; font-size: 16px; }
@media (min-width: 1024px) {
  .btn-modulo { min-height: 56px; font-size: 17px; }
  .btn-grande { min-height: 60px; padding: 0 28px; border-radius: 16px; }
}

.blocco-modulo { display: flex; flex-direction: column; gap: 12px; }
.modulo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .modulo-riga { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .modulo-riga .campo { flex: 1 1 0; min-width: 0; }
  .modulo-riga .btn { flex: 0 0 auto; }
  .modulo-riga .modulo-senza-js { flex: 1 1 100%; }
}
.campo {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--bordo);
  background: #fff;
  color: var(--inchiostro);
  font: inherit;
  font-size: 16px;
}
.campo::placeholder { color: #7A887F; }
.campo:disabled { background: #EEF2ED; color: #7A887F; }
.campo:focus { outline: 0; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(46, 110, 78, .22); }
.scuro .campo:focus { border-color: var(--verde-chiaro); box-shadow: 0 0 0 4px rgba(159, 209, 180, .45); }
.campo[aria-invalid="true"] { border-color: var(--errore); }
@media (min-width: 1024px) {
  .campo-grande { height: 60px; padding: 0 20px; border-radius: 16px; font-size: 17px; }
}
.wl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modulo-senza-js {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ambra-fondo);
  color: var(--ambra);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.esito { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; }
.esito:empty { display: none; }
.esito-ok { color: var(--verde); }
.esito-errore { color: var(--errore); }
.scuro .esito-ok { color: var(--verde-chiaro); }
.scuro .esito-errore { color: #FFB4A8; }

/* ---------- Testata ---------- */
/* La testata tiene sempre il suo spazio (65 px, 81 da 1024): quando la sua barra diventa fissa la pagina non salta. */
.testata { position: relative; z-index: 20; height: 65px; }
.testata-barra { border-bottom: 1px solid var(--bordo-tenue); }
.testata-riga { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inchiostro); flex-shrink: 0; }
.marchio:hover { color: var(--inchiostro); }
.marchio-segno { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--verde-scuro); display: flex; align-items: center; justify-content: center; }
.marchio-segno img { width: 26px; height: auto; display: block; }
.marchio-nomi { display: flex; flex-direction: column; gap: 2px; }
.marchio-nome { font-size: 18px; font-weight: 800; line-height: 1; }
.marchio-motto { display: none; font-size: 12px; font-weight: 500; line-height: 1; color: var(--muto); }
.marchio-motto-sempre { display: block; }
.nav-larga { display: none; }
.testata-azioni { display: flex; align-items: center; gap: 8px; }
.beta { display: none; padding: 4px 10px; border-radius: 999px; background: var(--ambra-fondo); color: var(--ambra); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.btn-testata { height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.solo-largo { display: none; }

.menu { position: relative; }
.menu-bottone {
  list-style: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--bordo);
  background: #fff;
  color: var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.menu-bottone::-webkit-details-marker { display: none; }
.menu[open] .menu-bottone { background: var(--menta); }
.menu-pannello {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--bordo);
  background: #fff;
  box-shadow: 0 18px 44px rgba(28, 58, 46, .16);
  display: flex;
  flex-direction: column;
}
.menu-pannello a { padding: 12px 14px; border-radius: 10px; color: var(--inchiostro); text-decoration: none; font-size: 16px; font-weight: 600; }
.menu-pannello a:hover { background: var(--fondo); }
.menu-pannello .menu-cta { margin-top: 6px; color: #fff; }
.menu-pannello .menu-cta:hover { background: var(--verde); color: #fff; }
.menu-pannello .menu-accedi { display: none; }

@media (min-width: 640px) {
  .beta { display: inline-block; }
}
@media (min-width: 1024px) {
  .testata { height: 81px; }
  .testata-riga { height: 80px; }
  .marchio { gap: 12px; }
  .marchio-segno { width: 40px; height: 40px; border-radius: 12px; }
  .marchio-segno img { width: 31px; }
  .marchio-nome { font-size: 20px; }
  .marchio-motto { display: block; }
  .nav-larga { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; }
  .nav-larga a { color: var(--inchiostro); text-decoration: none; white-space: nowrap; }
  .nav-larga a:hover { color: var(--verde); }
  .testata-azioni { gap: 12px; }
  .btn-testata { padding: 0 18px; font-size: 15px; }
  .solo-largo { display: inline-flex; }
  .menu { display: none; }
}
@media (min-width: 1280px) { .nav-larga { gap: 32px; } }

/* La barra che segue, fino a 1200 px. Quando la testata esce dallo schermo lo script scrive data-barra="fissa"
   sull'<html>: la barra si ferma in alto, alta 52 px, con il marchio, «Avvisami» (o «Inizia», secondo lo stato del
   lancio: sono gli stessi pulsanti della testata) e il menu. «Accedi» resta se c'è posto; sotto i 380 px va nel menu.
   Le ancore si fermano 64 px sotto il bordo: la barra non copre il titolo a cui si salta.
   Mentre si scrive in un campo, su un telefono, la barra si toglie: con la tastiera aperta non copre il campo. */
@media (max-width: 1200px) {
  html { scroll-padding-top: 64px; }
  [data-barra="fissa"] .testata-barra { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--fondo); box-shadow: 0 6px 20px rgba(28, 58, 46, .1); }
  [data-barra="fissa"] .testata-riga { height: 52px; }
  [data-barra="fissa"] .nav-larga, [data-barra="fissa"] .beta, [data-barra="fissa"] .marchio-motto { display: none; }
  [data-barra="fissa"] .marchio-segno { width: 34px; height: 34px; border-radius: 10px; }
  [data-barra="fissa"] .marchio-segno img { width: 26px; }
  [data-barra="fissa"] .marchio-nome { font-size: 18px; }
  [data-barra="fissa"] .testata-azioni { gap: 8px; }
  [data-barra="fissa"] .solo-largo { display: inline-flex; }
  [data-barra="fissa"] .btn-testata { height: 40px; padding: 0 13px; font-size: 14px; }
  [data-barra="fissa"] .menu { display: block; }
  [data-barra="fissa"] .menu-bottone { width: 40px; height: 40px; }
}
@media (max-width: 379px) {
  [data-barra="fissa"] .btn-accedi { display: none; }
  [data-barra="fissa"] .menu-pannello .menu-accedi { display: block; }
}
@media (max-width: 1200px) and (pointer: coarse) {
  [data-barra="fissa"][data-scrivendo] .testata-barra { visibility: hidden; }
}

/* ---------- Apertura ----------
   Da 1201 px due colonne: a sinistra titolo, testo e iscrizione; a destra il portatile con la home,
   il telefono con la bolletta letta e la foto della bolletta fra i due; sotto, i quattro vantaggi.
   Fino a 1200 px una colonna, e sotto il testo lo stesso gruppo in un'altra disposizione: in alto il portatile,
   largo quanto il gruppo; davanti, a destra, il telefono appoggiato alla tastiera, che scende sotto; a sinistra
   del telefono la foto della bolletta, con il bollino sul bordo fra i due e sotto la scritta verde.
   Il gruppo è disegnato in proporzione alla sua larghezza (unità cqw: 1cqw = 1% del gruppo), così resta lo stesso
   disegno a ogni misura; il telefono (--tel) e Dimorino hanno anche misure loro, in pixel.
   Le schermate si mostrano intere e nelle loro proporzioni, e si aprono ingrandite (la lente, più sotto). */
.eroe { padding: 32px 0 52px; }
.eroe-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.eroe-testo { display: flex; flex-direction: column; gap: 22px; }
.eroe-occhiello { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
h1 { margin: 14px 0 0; font-size: 36px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--inchiostro); }
.h1-verde { display: block; margin-top: 6px; color: var(--verde); }
.eroe-iscrizione { max-width: 620px; }
.eroe-lead { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muto); }
.eroe-iscrizione .blocco-modulo { margin-top: 22px; }
.eroe-nota { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muto); }
.btn-inizia { align-self: stretch; }
@media (min-width: 640px) {
  .btn-inizia { align-self: flex-start; }
  .lancio-modulo .btn-inizia { align-self: center; }
}
@media (min-width: 641px) {
  .eroe { padding: 44px 0 60px; }
  h1 { font-size: 50px; }
  .eroe-lead { font-size: 19px; }
  .eroe-nota { font-size: 15px; }
}

/* Le parti del gruppo, uguali a ogni misura: qui il disegno, la disposizione più sotto. */
.ap-dispositivi { --tel: 23cqw; container-type: inline-size; position: relative; isolation: isolate; }
.ap-portatile { position: relative; }
.ap-portatile::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: -1.2cqw; height: 2.6cqw; border-radius: 50%; background: rgba(28, 58, 46, .26); filter: blur(12px); }
.ap-schermo { box-sizing: content-box; aspect-ratio: 1475 / 775; border: 0 solid #1B1E20; background: var(--fondo); box-shadow: 0 0 0 1px #3A4043; overflow: hidden; }
.ap-base { display: block; width: 111.11%; height: auto; aspect-ratio: 1000 / 124; margin: -1px 0 0 -5.555%; }
/* Il telefono: un modello di oggi. Cornice sottile e uguale su tutti i lati, angoli molto arrotondati, schermo alto
   844 punti su 390: in alto una striscia di 44 punti del colore di fondo della schermata (#F2F5F0), con l'isola dentro;
   sotto, la schermata intera (390 × 800). La larghezza è --tel; cornice, angoli e ombra in proporzione.
   Il telefono è a sua volta un contenitore: dentro, 1cqw = 1% del suo schermo.
   Gli angoli dello schermo (15,5% della larghezza, meno la cornice) non toccano la scheda bianca in fondo alla schermata. */
.ap-telefono { position: relative; z-index: 2; width: var(--tel); border: calc(var(--tel) * .026) solid #1B1E20; border-radius: calc(var(--tel) * .155); background: #F2F5F0; box-shadow: 0 0 0 1px #3A4043, 0 calc(var(--tel) * .075) calc(var(--tel) * .13) rgba(28, 58, 46, .3); overflow: hidden; container-type: inline-size; }
.ap-telefono-stato { display: block; position: relative; aspect-ratio: 390 / 44; background: #F2F5F0; }
/* L'isola sta tutta dentro la striscia (da 8 a 36 punti su 44): non copre mai la schermata. */
.ap-isola { position: absolute; left: 35%; top: 18.2%; width: 30%; height: 63.6%; border-radius: 999px; background: #0E1011; }
.ap-foto { position: relative; padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 2px 4px rgba(28, 58, 46, .1), 0 18px 34px rgba(28, 58, 46, .26); transform: rotate(-4deg); }
.ap-foto img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ap-bollino { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--verde); display: flex; align-items: center; justify-content: center; }
.ap-bollino svg { width: 55%; height: 55%; }
.ap-scritta { font-size: 13.5px; font-weight: 800; letter-spacing: .01em; line-height: 1.3; color: var(--verde); }
.ap-dimorino { position: absolute; height: auto; }

/* Le schermate si aprono ingrandite: ognuna è un collegamento al suo file, con una lente piccola. */
.ap-lente { display: block; position: relative; color: var(--verde); cursor: zoom-in; }
.ap-lente img { display: block; width: 100%; height: auto; }
.ap-lente:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; border-radius: 0; }
.ap-lente-segno { --s: 30px; position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; color: var(--verde); box-shadow: 0 0 0 1px var(--bordo), 0 4px 10px rgba(28, 58, 46, .2); display: flex; align-items: center; justify-content: center; }
.ap-lente-segno svg { width: 55%; height: 55%; }
.ap-lente:hover .ap-lente-segno, .ap-lente:focus-visible .ap-lente-segno { background: var(--verde); color: #fff; }
/* Nel portatile, nello spazio vuoto sotto le case; nel telefono, nella striscia in alto, a destra dell'isola
   (11,28cqw è l'altezza della striscia: 44 su 390). */
.ap-schermo .ap-lente-segno { left: 52%; bottom: 5%; }
.ap-telefono .ap-lente { position: static; }
.ap-telefono .ap-lente-segno { --s: clamp(18px, 9.4cqw, 24px); top: max(0px, calc((11.28cqw - var(--s)) / 2)); right: 14cqw; }

.eroe-visivo .ap-didascalia { margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14.5px; line-height: 1.45; color: var(--muto); }
.ap-didascalia b { color: var(--inchiostro); }
.ap-vantaggi { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--bordo-tenue); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 28px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.ap-vantaggi li { display: flex; align-items: flex-start; gap: 10px; }
.ap-vantaggi svg { flex-shrink: 0; margin-top: 1px; }
@media (min-width: 641px) {
  .ap-vantaggi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fino a 1200 px: il portatile in alto (90cqw più la base, che arriva a 100cqw); lo schermo finisce a 48,5cqw,
   la base a 60,9cqw. Il telefono sale di 9,9cqw dentro la base: si appoggia sulla tastiera a 51cqw, sotto lo schermo.
   Largo 232–262 px: a 390 px di finestra circa 247 px, così i valori nei campi si leggono senza ingrandire.
   Fra 641 e 1200 px il gruppo è lo stesso, centrato, largo al massimo 560 px. */
@media (max-width: 1200px) {
  .ap-dispositivi { --tel: clamp(232px, 69cqw, 262px); --spazio: max(5cqw, 22px); display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 14px auto 0; }
  .ap-portatile { width: 90cqw; margin-left: 5cqw; }
  .ap-schermo { border-width: 1.04cqw 1.04cqw 1.23cqw; border-radius: 1.5cqw 1.5cqw .3cqw .3cqw; }
  .ap-telefono { align-self: flex-end; margin: -9.9cqw 1.5cqw 0 0; }
  /* A sinistra del telefono, sotto il portatile: la foto contro il telefono, il bollino a cavallo del bordo fra i due
     (--spazio, almeno 22 px: il bollino arriva alla cornice del telefono e non sullo schermo), la scritta sotto la foto. */
  .ap-zona { position: absolute; z-index: 3; left: 0; top: calc(61cqw + 14px); width: calc(100cqw - var(--tel) - 1.5cqw - var(--spazio)); display: flex; justify-content: flex-end; pointer-events: none; }
  .ap-foto-posto { position: relative; width: min(100%, 150px); }
  .ap-legame { display: contents; }
  .ap-bollino { --b: 34px; position: absolute; z-index: 1; right: calc(var(--b) / -2 - var(--spazio) / 2); top: 38%; width: var(--b); height: var(--b); border: 3px solid var(--fondo); box-shadow: 0 6px 14px rgba(28, 58, 46, .28); }
  .ap-scritta { position: absolute; left: 0; right: 0; top: calc(100% + 14px); font-size: 13px; text-align: center; text-wrap: balance; }
  .ap-scritta br { display: none; }
  /* Nel portatile la lente sta nella fascia vuota sotto le case, che qui è alta circa 30 px. */
  .ap-schermo .ap-lente-segno { --s: clamp(20px, 6cqw, 28px); bottom: 3%; }
  /* Dimorino in basso a sinistra, nello spazio libero sotto la scritta: non copre niente. */
  .ap-dimorino { left: 1cqw; bottom: 0; width: clamp(64px, 19cqw, 100px); }
  .eroe-visivo .ap-didascalia { margin-top: 20px; }
}

/* Da 1201 px: due colonne, il gruppo dei dispositivi a destra. Il disegno è quello approvato il 7/10, solo più
   piccolo; cambia il modello del telefono, largo 23cqw (162 px a 1280, 177 px a 1440): alto 48,4cqw, resta più
   basso del portatile (49cqw) e non arriva allo schermo. Dimorino no: è largo 165 px a ogni misura del gruppo. */
@media (min-width: 1201px) {
  .eroe-griglia { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .eroe-iscrizione { max-width: none; }
  .ap-dispositivi { display: block; width: 100%; margin: 0; padding: 0 0 2.6%; }
  .ap-portatile { width: 72.5%; margin-left: 4.6%; }
  .ap-schermo { border-width: .84cqw .84cqw .99cqw; border-radius: 1.22cqw 1.22cqw .23cqw .23cqw; }
  .ap-telefono { position: absolute; right: -1.22%; bottom: 0; }
  /* La zona ha la misura dello schermo del portatile: la foto si appoggia al suo bordo destro, all'81,5% dell'altezza. */
  .ap-zona { display: block; position: absolute; left: calc(4.6% + .84cqw); right: calc(22.9% + .84cqw); top: .84cqw; aspect-ratio: 1475 / 775; pointer-events: none; }
  .ap-foto-posto { display: block; position: absolute; z-index: 3; top: 81.5%; right: -1.6cqw; width: 14cqw; }
  /* La foto sotto il bollino: il bollino sta sul bordo destro della foto e arriva alla cornice del telefono
     (lo schermo comincia a 78,8cqw, la foto finisce a 77,9cqw): non copre la schermata. */
  .ap-foto { padding: max(3px, .46cqw); transform: rotate(-5deg); }
  .ap-legame { display: contents; }
  .ap-bollino { --b: clamp(28px, 2.9cqw, 38px); position: absolute; right: -.85cqw; top: 40%; width: var(--b); height: var(--b); border: 3px solid var(--fondo); box-shadow: 0 6px 14px rgba(28, 58, 46, .28); }
  .ap-scritta { position: absolute; left: -48px; right: -48px; top: calc(100% + 12px); text-align: center; font-size: 13px; line-height: 1.35; white-space: nowrap; }
  /* Dimorino in piedi davanti all'angolo sinistro del portatile, sulla tastiera: la sua testa resta sotto lo schermo
     (13,6cqw è la distanza fra il fondo del gruppo e il fondo dello schermo; la sua altezza è 0,88 la larghezza).
     Largo 165 px dove il gruppo è largo (da 1280 px di finestra), mai meno di 130 px: non segue il portatile. */
  .ap-dimorino { --d: clamp(130px, 24cqw, 165px); left: -24px; bottom: calc(13.6cqw - var(--d) * .88 - 2px); width: var(--d); }
  /* La didascalia sotto Dimorino e sotto la scritta verde, che escono dal fondo del gruppo. */
  .eroe-visivo .ap-didascalia { margin-top: calc(max(clamp(130px, 24%, 165px) * .88 + 2px - 13.6%, 2.5% + 48px) + 14px); flex-flow: row wrap; justify-content: center; gap: 4px 28px; }
  .ap-vantaggi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La lente: una finestra (dialog) con la schermata adattata allo schermo o alla sua dimensione reale, da esplorare
   scorrendo. Si chiude con «Chiudi», con Esc o toccando fuori. Sul telefono occupa tutto lo schermo. */
html.lente-aperta { overflow: hidden; }
.lente { width: min(1240px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--inchiostro); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
.lente[open] { display: flex; flex-direction: column; }
.lente::backdrop { background: rgba(20, 40, 32, .72); }
.lente-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--bordo-tenue); }
.lente-titolo { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; }
.lente-azioni { display: flex; gap: 8px; margin-left: auto; }
.lente-bottone { min-height: 44px; padding: 0 16px; border: 1px solid var(--bordo); border-radius: 12px; background: #fff; color: var(--inchiostro); font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lente-bottone[aria-pressed="true"] { background: var(--menta); }
.lente-chiudi { border-color: var(--verde); background: var(--verde); color: #fff; }
.lente-area { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; padding: 16px; background: var(--fondo); }
.lente-area img { display: block; margin: auto; max-width: 100%; max-height: calc(100vh - 32px - 66px - 32px); max-height: calc(100dvh - 32px - 66px - 32px); width: auto; height: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(28, 58, 46, .18); cursor: zoom-in; }
.lente-reale img { max-width: none; max-height: none; cursor: zoom-out; }
.lente-senza-modo img { cursor: default; }
@media (max-width: 639px) {
  .lente { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .lente-barra { padding: 8px 8px 8px 14px; }
  .lente-titolo { flex-basis: 100%; font-size: 13px; }
  .lente-area { padding: 10px; }
  .lente-area img { max-height: none; }
}

/* ---------- Il lancio ---------- */
.scuro { background: var(--verde-scuro); color: #fff; }
.occhiello { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--verde); }
.scuro .occhiello { color: var(--verde-chiaro); }
.lancio { position: relative; overflow: hidden; padding: 56px 0; text-align: center; }
.lancio-dentro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.lancio-testa { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lancio h2 { margin: 0; font-size: clamp(30px, calc(24px + 1.6vw), 46px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.timer { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.timer-casella { padding: 26px 0 20px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.timer-cifra { display: inline-block; font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.timer-unita { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--verde-chiaro); }
.lancio-testo { margin: 0; max-width: 600px; font-size: 16px; line-height: 1.55; color: var(--su-scuro); }
.lancio-modulo { width: 100%; max-width: 600px; }
.lancio-nota { margin: 0; font-size: 14px; line-height: 1.5; color: var(--su-scuro); }
@media (min-width: 640px) {
  .timer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 952px; }
  .timer-cifra { font-size: clamp(56px, 9vw, 92px); }
}
@media (min-width: 1024px) {
  .lancio { padding: 96px 0; }
  .lancio-dentro { gap: 40px; }
  .lancio-testa { gap: 14px; }
  .lancio .occhiello { font-size: 13px; }
  .timer { display: flex; justify-content: center; gap: 24px; width: auto; }
  .timer-casella { width: 220px; padding: 40px 0 30px; border-radius: 28px; gap: 14px; }
  .timer-cifra { font-size: 120px; }
  .timer-unita { font-size: 18px; }
  .lancio-testo { font-size: 18px; }
  .lancio-nota { font-size: 16px; }
}

/* ---------- La storia ---------- */
.storia { padding: 48px 0; background: var(--grigio); }
.storia-griglia { display: flex; flex-direction: column; gap: 26px; }
.storia-foto { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.storia-cornice { padding: 8px; border-radius: 6px; background: #fff; box-shadow: 0 2px 4px rgba(28, 58, 46, .08), 0 16px 36px rgba(28, 58, 46, .18); transform: rotate(-1.5deg); }
.storia-cornice img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.storia-foto figcaption { font-size: 13px; line-height: 1.5; color: var(--muto); }
.storia-scheda { padding: 26px 22px; border-radius: 20px; border: 1px solid var(--bordo-tenue); background: #fff; display: flex; flex-direction: column; gap: 14px; }
.storia-scheda p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--testo-storia); }
.storia-scheda .storia-domanda { font-size: 22px; line-height: 1.35; font-weight: 800; color: var(--inchiostro); }
/* Il resto della lettera: sempre visibile, tranne sul telefono finché non si tocca «Continua a leggere» (più sotto). */
.storia-resto { display: flex; flex-direction: column; gap: inherit; }
.storia-resto:focus { outline: 0; }
.storia-continua { display: none; align-self: flex-start; margin: -2px 0 0; padding: 10px 0; border: 0; background: none; color: var(--verde); font: inherit; font-size: 15px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.firma { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.firma-iniziale { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: var(--verde-scuro); color: var(--menta); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.firma-testi { display: flex; flex-direction: column; gap: 2px; }
.firma-nome { font-size: 16px; font-weight: 800; color: var(--inchiostro); }
.firma-ruolo { font-size: 13px; line-height: 1.4; color: var(--muto); }
@media (min-width: 1024px) {
  .storia { padding: 96px 0; }
  .storia-griglia { flex-direction: row; align-items: center; gap: 48px; }
  .storia-foto { flex: 0 0 44%; gap: 18px; }
  .storia-cornice { padding: 12px; box-shadow: 0 2px 4px rgba(28, 58, 46, .08), 0 22px 50px rgba(28, 58, 46, .18); }
  .storia-foto figcaption { padding-left: 8px; font-size: 14px; line-height: 1.55; }
  .storia-scheda { flex: 1 1 0; min-width: 0; padding: 40px 40px; border-radius: 22px; gap: 18px; }
  .storia-scheda p { font-size: 17px; line-height: 1.7; }
  .storia-scheda .storia-domanda { font-size: 27px; line-height: 1.35; letter-spacing: -.01em; }
  .firma { gap: 12px; padding-top: 6px; }
  .firma-iniziale { width: 44px; height: 44px; font-size: 18px; }
  .firma-nome { font-size: 17px; }
  .firma-ruolo { font-size: 14px; }
}
@media (min-width: 1280px) {
  .storia-griglia { gap: 72px; }
  .storia-scheda { padding: 44px 48px; }
}

/* ---------- Sezioni ---------- */
.sezione { padding: var(--sezione-y) 0; }
.bianca { background: #fff; }
.grigia { background: var(--grigio); }
.sezione-testa { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.sezione-testa h2, .fascicolo-testo h2, .trasparenza-testo h2 { margin: 0; font-size: clamp(30px, calc(25.5px + 1.15vw), 42px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--inchiostro); }
.sezione-testa p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muto); }
.scuro .sezione-testa h2 { color: #fff; }
.scuro .sezione-testa p { color: var(--su-scuro); }
@media (min-width: 1024px) {
  .sezione-testa { align-items: center; text-align: center; max-width: 960px; margin: 0 auto 40px; gap: 14px; }
  .sezione-testa-stretta { max-width: 760px; }
  .sezione-testa .occhiello { font-size: 13px; }
  .sezione-testa p { font-size: 18px; }
}

.griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) {
  .griglia-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
  .griglia { gap: 24px; }
  .griglia-3, .griglia-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #affitti .griglia, .piani { gap: 20px; }
}

.scheda { border-radius: 16px; border: 1px solid var(--bordo); background: #fff; }
.scheda h3 { margin: 0; font-weight: 800; color: var(--inchiostro); }
.scheda p { margin: 0; color: var(--muto); }

.scheda-banda { overflow: hidden; display: flex; flex-direction: column; }
.banda { padding: 12px 20px; background: var(--menta); display: flex; align-items: center; gap: 10px; color: var(--menta-testo); }
.banda svg { width: 20px; height: 20px; flex-shrink: 0; }
.banda span { font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.banda-corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.banda-corpo h3 { font-size: 18px; }
.banda-corpo p { font-size: 14.5px; line-height: 1.55; }

.scheda-passo { padding: 22px; border-radius: 18px; background: var(--fondo); display: flex; flex-direction: column; gap: 10px; }
.passo-num { width: 38px; height: 38px; border-radius: 999px; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.scheda-passo h3 { font-size: 19px; }
.scheda-passo p { font-size: 15px; line-height: 1.6; }

.scheda-icona { padding: 20px; display: flex; gap: 14px; }
.scheda-icona > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.icona { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--menta); color: var(--verde); display: flex; align-items: center; justify-content: center; }
.icona svg { width: 20px; height: 20px; }
.scheda-icona h3 { font-size: 17px; line-height: 1.3; }
.scheda-icona p { font-size: 14.5px; line-height: 1.55; }
.scheda-sicura { border-color: var(--bordo-tenue); }

/* Le domande: una riga per domanda, un <details> per riga. Si aprono e si chiudono anche senza
   script e da tastiera; aprirne una non chiude le altre. Il «+» diventa «−» quando è aperta. */
.domande { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.domanda summary { list-style: none; padding: 18px 20px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:focus-visible { border-radius: 14px; outline-offset: -3px; }
.domanda h3 { font-size: 16.5px; line-height: 1.35; }
.domanda p { padding: 0 20px 20px; font-size: 14.5px; line-height: 1.6; }
.domanda-segno { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--menta); color: var(--verde); }
.domanda-segno::before, .domanda-segno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; }
.domanda-segno::after { transform: rotate(90deg); }
.domanda[open] .domanda-segno::after { transform: rotate(90deg) scaleX(0); }

@media (min-width: 1024px) {
  .scheda { border-radius: 18px; }
  .banda { padding: 16px 30px; gap: 12px; }
  .banda svg { width: 24px; height: 24px; }
  .banda span { font-size: 13px; }
  .banda-corpo { padding: 26px 30px 30px; gap: 12px; }
  .banda-corpo h3 { font-size: 22px; }
  .banda-corpo p { font-size: 16px; line-height: 1.6; }
  .scheda-passo { padding: 32px; gap: 14px; }
  .passo-num { width: 44px; height: 44px; font-size: 18px; }
  .scheda-passo h3 { font-size: 22px; }
  .scheda-passo p { font-size: 16px; }
  .scheda-icona { padding: 30px; flex-direction: column; gap: 14px; }
  .scheda-icona > div { gap: 14px; }
  .icona { width: 48px; height: 48px; border-radius: 14px; }
  .icona svg { width: 24px; height: 24px; }
  .scheda-icona h3 { font-size: 20px; line-height: 1.25; }
  .scheda-icona p { font-size: 16px; line-height: 1.6; }
  .scheda-sicura { padding: 26px; gap: 12px; }
  .scheda-sicura > div { gap: 12px; }
  .scheda-sicura .icona { width: 44px; height: 44px; border-radius: 12px; }
  .scheda-sicura .icona svg { width: 22px; height: 22px; }
  .scheda-sicura h3 { font-size: 18px; }
  .scheda-sicura p { font-size: 15px; }
  .domande { gap: 14px; }
  .domanda summary { padding: 22px 28px; border-radius: 18px; }
  .domanda summary:focus-visible { border-radius: 16px; }
  .domanda h3 { font-size: 18px; }
  .domanda p { padding: 0 28px 26px; font-size: 16px; }
  .domanda-segno { width: 34px; height: 34px; }
  .domanda-segno::before, .domanda-segno::after { width: 14px; margin-left: -7px; }
}

/* Come funziona: la mascotte, il telefono, a mano */
.mascotte { margin-top: 20px; padding: 24px 22px; border-radius: 18px; background: var(--fondo); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mascotte-img { width: 182px; height: auto; flex-shrink: 0; }
.mascotte-testi { display: flex; flex-direction: column; gap: 10px; }
.mascotte-testi h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; }
.mascotte-testi p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muto); }
.telefono { margin-top: 20px; padding: 24px 22px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
.telefono-icona { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: rgba(255, 255, 255, .1); color: var(--verde-chiaro); display: flex; align-items: center; justify-content: center; }
.telefono-icona svg { width: 26px; height: 26px; }
.telefono-testi { display: flex; flex-direction: column; gap: 10px; }
.telefono-testi .occhiello { padding-top: 4px; }
.telefono-testi h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; color: #fff; }
.telefono-testi p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--su-scuro); }
.negozi { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.negozi span { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.a-mano { margin: 20px 0 0; padding: 14px; border-radius: 14px; background: var(--fondo); display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--inchiostro); }
.a-mano svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
@media (min-width: 768px) {
  .mascotte { flex-direction: row; text-align: left; gap: 32px; padding: 24px 40px 24px 24px; }
}
@media (min-width: 1024px) {
  .mascotte { margin-top: 24px; gap: 40px; padding: 24px 48px 24px 32px; }
  .mascotte-img { width: 228px; }
  .mascotte-testi h3 { font-size: 28px; }
  .mascotte-testi p { max-width: 760px; font-size: 17px; }
  .telefono { margin-top: 24px; flex-direction: row; align-items: center; gap: 32px; padding: 32px 40px; }
  .telefono-icona { width: 76px; height: 76px; border-radius: 22px; }
  .telefono-icona svg { width: 36px; height: 36px; }
  .telefono-testi { flex: 1 1 0; min-width: 0; gap: 8px; }
  .telefono-testi .occhiello { padding-top: 0; font-size: 13px; }
  .telefono-testi h3 { font-size: 28px; }
  .telefono-testi p { max-width: 720px; font-size: 17px; }
  .negozi { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding-top: 0; flex-shrink: 0; }
  .negozi span { padding: 10px 18px; border-radius: 12px; font-size: 15px; }
  .a-mano { width: fit-content; max-width: 100%; margin: 24px auto 0; align-items: center; gap: 12px; padding: 14px 20px; font-size: 16px; }
  .a-mano svg { width: 20px; height: 20px; margin-top: 0; }
  .mascotte .occhiello { font-size: 13px; }
}

/* ---------- Per il commercialista ---------- */
.fascicolo-griglia { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "testo" "mock" "nota"; gap: 18px; }
.fascicolo-testo { grid-area: testo; display: flex; flex-direction: column; gap: 18px; }
.fascicolo-intro { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muto); }
.fascicolo-passi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fascicolo-passi li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--inchiostro); }
.fp-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--menta); color: var(--menta-testo); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.fascicolo-nota { grid-area: nota; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muto); }
.fascicolo-mock { grid-area: mock; border-radius: 20px; border: 1px solid var(--bordo); background: #fff; box-shadow: 0 18px 44px rgba(28, 58, 46, .14); overflow: hidden; display: flex; flex-direction: column; color: var(--inchiostro); }
.fm-testa { padding: 12px 16px; border-bottom: 1px solid var(--bordo-mock); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fm-titolo { font-size: 14px; font-weight: 800; }
.fm-anno { padding: 3px 9px; border-radius: 999px; background: var(--neutro); font-size: 11px; font-weight: 700; white-space: nowrap; }
.fm-corpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fm-voce { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fm-voce-nome { font-size: 16px; font-weight: 800; }
.fm-tag { padding: 3px 9px; border-radius: 999px; background: var(--menta); color: var(--menta-testo); font-size: 11px; font-weight: 800; white-space: nowrap; }
.fm-tag-piccolo { padding: 3px 8px; font-size: 10.5px; }
.fm-riga { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bordo-mock); font-size: 12.5px; }
.fm-riga span:first-child { color: var(--muto); font-weight: 600; }
.fm-riga span:last-child { font-weight: 800; text-align: right; }
.fm-occhiello { padding-top: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muto); }
.fm-doc { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--fondo); font-size: 12.5px; }
.fm-doc-icona { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: #fff; color: var(--verde); display: flex; align-items: center; justify-content: center; }
.fm-doc-nome { flex: 1 1 auto; min-width: 0; font-weight: 700; line-height: 1.35; }
.fm-piede { padding: 12px 16px; background: var(--fondo); border-top: 1px solid var(--bordo-mock); display: flex; flex-direction: column; gap: 10px; }
.fm-piede-tit { font-size: 12.5px; font-weight: 800; }
.fm-bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-bottoni span { height: 34px; padding: 0 12px; display: flex; align-items: center; border-radius: 10px; border: 1px solid var(--bordo); background: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
@media (min-width: 1024px) {
  .fascicolo-griglia { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "testo mock" "nota mock"; column-gap: 48px; row-gap: 18px; }
  .fascicolo-testo { align-self: end; }
  .fascicolo-nota { align-self: start; font-size: 14px; }
  .fascicolo-mock { align-self: center; border-radius: 22px; box-shadow: 0 24px 60px rgba(28, 58, 46, .14); }
  .fascicolo-testo .occhiello { font-size: 13px; }
  .fascicolo-testo h2 { font-size: 40px; }
  .fascicolo-intro { font-size: 17px; }
  .fascicolo-passi { gap: 14px; padding-top: 4px; }
  .fascicolo-passi li { gap: 14px; font-size: 16px; line-height: 1.55; }
  .fp-num { width: 30px; height: 30px; font-size: 14px; }
  .fm-testa { padding: 16px 22px; }
  .fm-titolo { font-size: 16px; }
  .fm-anno { padding: 4px 10px; font-size: 12px; }
  .fm-corpo { padding: 20px 22px; gap: 12px; }
  .fm-voce-nome { font-size: 18px; }
  .fm-tag { padding: 4px 10px; font-size: 12px; }
  .fm-tag-piccolo { padding: 3px 9px; font-size: 11px; }
  .fm-riga { gap: 16px; padding: 9px 12px; font-size: 13px; }
  .fm-occhiello { padding-top: 4px; font-size: 11px; }
  .fm-doc { padding: 10px 12px; font-size: 13px; }
  .fm-doc-icona { width: 30px; height: 30px; }
  .fm-piede { padding: 14px 22px; }
  .fm-piede-tit { font-size: 13px; }
  .fm-bottoni span { height: 36px; padding: 0 14px; font-size: 13px; }
}
@media (min-width: 1280px) {
  .fascicolo-griglia { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); column-gap: 72px; }
  .fm-piede { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .fm-bottoni { flex-wrap: nowrap; }
}

/* ---------- Per chi affitta ---------- */
.scheda-scura { padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 8px; }
.scura-icona { display: none; }
.scheda-scura h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; color: #fff; }
.scheda-scura p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--su-scuro); }
.affitti-nota { margin: 20px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--su-scuro); }
@media (min-width: 640px) { .scura-icona { display: block; } }
@media (min-width: 1024px) {
  .scheda-scura { padding: 28px; border-radius: 18px; gap: 12px; }
  .scheda-scura h3 { font-size: 19px; }
  .scheda-scura p { font-size: 15px; line-height: 1.6; }
  .affitti-nota { max-width: 960px; margin: 48px auto 0; text-align: center; font-size: 16px; line-height: 1.6; }
}

/* ---------- Prezzi ---------- */
.prova { padding: 22px; border-radius: 18px; background: var(--menta); display: flex; flex-direction: column; gap: 12px; }
.prova-testi { display: flex; flex-direction: column; gap: 12px; }
.prova-titolo { font-size: 18px; font-weight: 800; }
.prova-desc { font-size: 15px; line-height: 1.5; }
.modulo-prova .campo { height: 50px; }
.modulo-prova .btn-modulo { min-height: 50px; font-size: 15px; }
.piani-testa { margin: 26px 0 16px; display: flex; flex-direction: column; gap: 4px; }
.piani-testa h3 { margin: 0; font-size: 21px; font-weight: 800; }
.piani-testa span { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--muto); }
/* L'interruttore annuale / mensile. Lo script scrive data-periodo ("anno" o "mese") sulla sezione:
   senza script l'interruttore non c'è e ogni scheda mostra i due prezzi insieme, come prima.
   Con «Mensile» le righe del risparmio e del regalo restano, invisibili: le schede non cambiano altezza. */
.interruttore { width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 4px; border: 1px solid var(--bordo); border-radius: 999px; background: #fff; display: flex; gap: 4px; }
.interruttore-voce { margin: 0; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--inchiostro); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; }
.interruttore-voce[aria-pressed="true"] { background: var(--verde); color: #fff; }
.interruttore-nota { font-weight: 600; }
.interruttore-voce[aria-pressed="false"] .interruttore-nota { color: var(--muto); }
.interruttore-voce:focus-visible { border-radius: 999px; outline-offset: 2px; }
[data-prezzi]:not([data-periodo]) .interruttore,
[data-prezzi]:not([data-periodo]) .piano-prezzo-mese,
[data-prezzi][data-periodo] .piano-oppure,
[data-prezzi][data-periodo="anno"] .piano-prezzo-mese,
[data-prezzi][data-periodo="mese"] .piano-prezzo-anno { display: none !important; }
[data-prezzi][data-periodo="mese"] .piano-risparmio,
[data-prezzi][data-periodo="mese"] .piano-regalo { visibility: hidden; }
.piano { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.piano-nome { min-height: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.piano-nome h4 { margin: 0; font-size: 19px; font-weight: 800; color: var(--inchiostro); }
.piano-richiesta { padding: 3px 9px; border-radius: 999px; background: var(--menta); color: var(--menta-testo); font-size: 11px; font-weight: 800; white-space: nowrap; }
.piano-prezzo { display: flex; align-items: baseline; gap: 8px; }
.piano-cifra { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--inchiostro); white-space: nowrap; }
.piano-periodo { font-size: 14px; font-weight: 600; color: var(--muto); }
.piano-mese, .piano .piano-regalo { font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--muto); }
/* Il regalo dell'annuale chiude la scheda: in fondo, alla stessa altezza nelle tre schede. */
.piano .piano-regalo { margin-top: auto; }
.piano-dotazione { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--bordo-mock); border-bottom: 1px solid var(--bordo-mock); font-size: 14.5px; font-weight: 700; color: var(--inchiostro); }
.piano .piano-desc { font-size: 14px; line-height: 1.55; }
/* Le note: centrate, una sotto l'altra, in una colonna larga al massimo 760 px.
   L'ultima (piani e prezzi previsti) più piccola e più chiara. */
.piani-note { list-style: none; margin: 16px 0 0; padding: 20px; border-radius: 16px; background: var(--menta); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--inchiostro); text-align: center; }
.piani-note li { max-width: 760px; }
.piani-note .piani-note-ultima { font-size: 13px; color: var(--muto); }
@media (min-width: 1024px) {
  .prova { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 32px; }
  .prova-testi { gap: 6px; flex: 1 1 0; min-width: 0; }
  .prova-titolo { font-size: 20px; }
  .prova-desc { font-size: 16px; }
  .prova-azione { flex: 0 0 auto; width: 460px; }
  .modulo-prova .campo { height: 52px; }
  .modulo-prova .btn-modulo { min-height: 52px; padding: 0 22px; font-size: 16px; }
  .piani-testa { margin: 36px 0 28px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; }
  .piani-testa h3 { font-size: 24px; }
  .piani-testa span { font-size: 15px; }
  .interruttore { margin-bottom: 28px; }
  .interruttore-voce { padding: 10px 20px; font-size: 15px; }
  .piano { padding: 28px 30px; gap: 12px; }
  .piano-nome h4 { font-size: 22px; }
  .piano-richiesta { padding: 4px 10px; font-size: 12px; }
  .piano-cifra { font-size: 44px; }
  .piano-periodo { font-size: 15px; }
  .piano-mese, .piano .piano-regalo { font-size: 14px; }
  .piano-dotazione { gap: 8px; padding: 14px 0; font-size: 15px; }
  .piano .piano-desc { font-size: 14.5px; line-height: 1.6; }
  .piani-note { margin-top: 28px; padding: 26px 32px; border-radius: 18px; gap: 12px; font-size: 15px; }
  .piani-note .piani-note-ultima { font-size: 14px; }
}
/* Fra 1024 e 1279 px «Attivazione su richiesta» va a capo: la testata dei tre piani ha la stessa altezza. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .piano-nome { min-height: 62px; align-content: flex-start; }
}
/* Dove «l'anno, in un'unica soluzione» non sta accanto alla cifra (schede strette: fra 1024 e 1279 px,
   e sotto i 360 px), il periodo va sotto la cifra in tutte e tre le schede, anche «al mese»:
   le righe del prezzo hanno la stessa altezza, le schede restano allineate e non saltano cambiando periodo. */
@media (max-width: 359px), (min-width: 1024px) and (max-width: 1279px) {
  .piano-prezzo { flex-wrap: wrap; row-gap: 2px; }
  .piano-periodo { flex-basis: 100%; }
}

/* ---------- Un aiuto vero ---------- */
.trasparenza-griglia { display: flex; flex-direction: column; gap: 16px; }
.trasparenza-testo { display: flex; flex-direction: column; gap: 16px; }
.trasparenza-testo h2 { font-size: clamp(28px, calc(24px + 1vw), 38px); }
.trasparenza-testo p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muto); }
.trasparenza-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.trasparenza-elenco li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--inchiostro); }
.trasparenza-elenco svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
@media (min-width: 640px) {
  .trasparenza-elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trasparenza-elenco li { padding: 22px; border-radius: 16px; background: var(--fondo); gap: 12px; font-size: 16px; }
  .trasparenza-elenco svg { width: 20px; height: 20px; }
}
@media (min-width: 1024px) {
  .trasparenza-griglia { flex-direction: row; align-items: flex-start; gap: 48px; }
  .trasparenza-testo { flex: 0 0 380px; gap: 14px; }
  .trasparenza-testo .occhiello { font-size: 13px; }
  .trasparenza-testo p { font-size: 17px; }
  .trasparenza-elenco { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1280px) {
  .trasparenza-griglia { gap: 64px; }
  .trasparenza-testo { flex-basis: 440px; }
}

/* ---------- Sicurezza ---------- */
.sicurezza-nota { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--muto); }
.sicurezza-nota a { color: var(--inchiostro); font-weight: 700; }
@media (min-width: 1024px) { .sicurezza-nota { margin-top: 36px; text-align: center; font-size: 15px; } }

/* ---------- Chiusura ---------- */
.finale { padding: 8px 0 40px; }
.finale-box { padding: 28px 24px 32px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.finale-img { width: 152px; height: auto; flex-shrink: 0; }
.finale-testi { display: flex; flex-direction: column; gap: 12px; }
.finale-testi h2 { margin: 0; font-size: clamp(28px, calc(24px + 1.1vw), 40px); line-height: 1.15; font-weight: 800; color: #fff; }
.finale-testi p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--su-scuro); }
.finale-azione { align-self: stretch; }
@media (min-width: 640px) {
  .finale-azione { align-self: center; width: 100%; max-width: 420px; }
}
@media (min-width: 1024px) {
  .finale { padding: 0 0 var(--sezione-y); }
  .finale-box { flex-direction: row; text-align: left; gap: 28px; padding: 32px 40px 32px 32px; border-radius: 28px; }
  .finale-img { width: 170px; }
  .finale-testi { flex: 1 1 0; min-width: 0; }
  .finale-testi p { font-size: 18px; }
  .finale-azione { flex: 0 0 300px; max-width: none; }
}
@media (min-width: 1280px) {
  .finale-box { gap: 40px; padding: 36px 64px 36px 48px; }
  .finale-img { width: 210px; }
  .finale-azione { flex-basis: 340px; }
}

/* ---------- Piè di pagina ---------- */
.piede { padding: 32px 0; border-top: 1px solid var(--bordo-tenue); }
.piede-alto { display: flex; flex-direction: column; gap: 24px; }
.marchio-segno-piccolo img { width: 26px; }
.piede-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; font-size: 15px; }
.piede-colonna { display: flex; flex-direction: column; gap: 10px; }
.piede-colonna a { color: var(--inchiostro); text-decoration: none; }
.piede-colonna a:hover { color: var(--verde); text-decoration: underline; }
.piede-tit { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muto); }
.piede-basso { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bordo-tenue); display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muto); }
.piede-basso a { color: var(--inchiostro); font-weight: 600; }
@media (min-width: 768px) {
  .piede-colonne { grid-template-columns: repeat(3, auto); justify-content: start; gap: 48px; }
}
@media (min-width: 1024px) {
  .piede { padding: 40px 0; }
  .piede-alto { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .marchio-segno-piccolo { width: 36px; height: 36px; border-radius: 10px; }
  .marchio-segno-piccolo img { width: 28px; }
  .piede .marchio-nome { font-size: 18px; }
  .piede-colonne { gap: 72px; }
  .piede-basso { margin-top: 32px; flex-direction: row; justify-content: space-between; gap: 24px; font-size: 14px; }
}

/* ---------- Sul telefono, fino a 640 px: meno peso ----------
   Le righe che scorrono: «Per chi è», i tre passi di «Come funziona», «Per chi affitta» e i tre piani ([data-scorre]).
   Una riga larga quanto lo schermo, che scorre con il dito e si aggancia a ogni scheda (CSS, senza librerie);
   ogni scheda è larga l'82% dello schermo, così la successiva spunta a destra; la prima parte allineata al testo,
   l'ultima arriva tutta in vista. Lo scorrimento resta dentro la riga. Sotto, i puntini (li scrive lo script).
   Da tastiera la riga si raggiunge e scorre con le frecce; per un lettore di schermo è una regione con il titolo
   della sua sezione (lo script, solo quando la riga scorre davvero). */
.puntini { display: none; }
@media (max-width: 640px) {
  [data-scorre] { position: relative; display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  [data-scorre]::-webkit-scrollbar { display: none; }
  [data-scorre] > * { flex: 0 0 calc((100% + 2 * var(--gutter)) * .82); min-width: 0; scroll-snap-align: start; }
  [data-scorre]:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; border-radius: 14px; }
  .scuro [data-scorre]:focus-visible { outline-color: var(--verde-chiaro); }
  /* Le schede di una riga sono già lì: non compaiono una alla volta. */
  .js [data-scorre] > .rv { opacity: 1; transform: none; }
  .puntini { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .puntini span { width: 7px; height: 7px; border-radius: 4px; background: var(--bordo); }
  .puntini span[data-attivo] { width: 20px; background: var(--verde); }
  .scuro .puntini span { background: rgba(255, 255, 255, .28); }
  .scuro .puntini span[data-attivo] { background: var(--verde-chiaro); }

  /* In generale: meno spazio sopra e sotto le sezioni e dentro le schede, titoli di sezione a 24 px,
     il testo corrente a 15 px, niente sotto i 12 px. */
  :root { --sezione-y: 36px; }
  .eroe { padding: 24px 0 36px; }
  .ap-vantaggi { margin-top: 22px; padding-top: 18px; }
  .sezione-testa { gap: 8px; margin-bottom: 16px; }
  .sezione-testa h2, .fascicolo-testo h2, .trasparenza-testo h2, .lancio h2, .finale-testi h2 { font-size: 24px; line-height: 1.2; }

  /* Il lancio: i quattro numeri su una riga. */
  .lancio { padding: 36px 0; }
  .lancio-dentro { gap: 18px; }
  .timer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .timer-casella { padding: 14px 0 12px; border-radius: 16px; gap: 6px; }
  .timer-cifra { font-size: clamp(34px, 10.5vw, 46px); }
  .timer-unita { font-size: 12px; letter-spacing: .04em; }

  /* La lettera: foto, didascalia, domanda e primo paragrafo; il resto con «Continua a leggere». La firma resta. */
  .storia { padding: 36px 0; }
  .storia-griglia { gap: 20px; }
  .storia-foto { gap: 10px; }
  .storia-scheda { padding: 22px 18px; gap: 12px; }
  .storia-scheda .storia-domanda { font-size: 21px; }
  [data-chiusa] .storia-resto { display: none; }
  [data-chiusa] .storia-continua { display: inline-flex; }

  /* Le schede delle righe. */
  .banda { padding: 10px 18px; }
  .banda-corpo { padding: 14px 18px 18px; }
  .banda-corpo p { font-size: 15px; }
  .scheda-passo { padding: 18px; gap: 8px; }
  .passo-num { width: 34px; height: 34px; }
  .scheda-scura { padding: 18px; }
  .scheda-scura p { font-size: 15px; }
  .affitti-nota { margin-top: 16px; font-size: 15px; }

  /* Come funziona: Dimorino in orizzontale, la scheda del telefono più corta, i due bollini su una riga. */
  .mascotte { margin-top: 16px; padding: 16px; flex-direction: row; align-items: center; gap: 14px; text-align: left; }
  .mascotte-img { width: 84px; }
  .mascotte-testi { gap: 6px; }
  .mascotte-testi h3 { font-size: 19px; }
  .telefono { margin-top: 16px; padding: 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; }
  .telefono-icona { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; }
  .telefono-icona svg { width: 22px; height: 22px; }
  .telefono-testi { display: contents; }
  .telefono-testi .occhiello { padding-top: 0; }
  .telefono-testi h3 { font-size: 19px; }
  .telefono-testi p, .negozi { grid-column: 1 / -1; }
  .negozi { flex-wrap: nowrap; gap: 6px; padding-top: 2px; }
  .negozi span { padding: 7px 9px; font-size: 12px; }
  .a-mano { margin-top: 16px; font-size: 15px; }

  /* Che cosa fa per te: un elenco, non schede. Icona a sinistra, titolo e testo a destra, una riga sottile fra le voci. */
  #funzioni .griglia { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #funzioni .scheda-icona { padding: 14px 0; gap: 14px; border: 0; border-top: 1px solid var(--bordo); border-radius: 0; background: none; }
  #funzioni .scheda-icona:first-child { padding-top: 2px; border-top: 0; }
  #funzioni .scheda-icona:last-child { padding-bottom: 0; }
  #funzioni .icona { width: 36px; height: 36px; border-radius: 10px; }
  #funzioni .scheda-icona > div { gap: 4px; }
  .scheda-icona p { font-size: 15px; }

  /* Per il commercialista, un aiuto vero, sicurezza, domande: restano in verticale, con meno spazio. */
  .fascicolo-griglia { gap: 14px; }
  .fascicolo-testo { gap: 14px; }
  .fascicolo-passi { gap: 10px; }
  .fm-anno, .fm-tag, .fm-tag-piccolo, .fm-occhiello { font-size: 12px; }
  .trasparenza-griglia, .trasparenza-testo, .trasparenza-elenco { gap: 12px; }
  .scheda-sicura { padding: 16px; }
  .sicurezza-nota { margin-top: 14px; }
  .domande { gap: 10px; }
  .domanda summary { padding: 15px 16px; }
  .domanda p { padding: 0 16px 16px; font-size: 15px; }

  /* I prezzi. */
  .prova { padding: 18px; gap: 10px; }
  .prova-testi { gap: 8px; }
  .piani-testa { margin: 20px 0 12px; }
  .interruttore { margin-bottom: 14px; }
  .piano { padding: 18px; gap: 8px; }
  .piano-richiesta { font-size: 12px; }
  .piano .piano-desc { font-size: 15px; }
  .piani-note { margin-top: 14px; padding: 16px; gap: 8px; }

  /* La chiusura e il piè di pagina: ogni collegamento si tocca su un'area alta almeno 40 px. */
  .finale { padding: 4px 0 32px; }
  .finale-box { padding: 22px 18px 24px; gap: 12px; }
  .finale-img { width: 120px; }
  .piede { padding: 20px 0 24px; }
  .piede-alto { gap: 14px; }
  .piede .marchio { min-height: 40px; }
  .piede-colonne { gap: 14px 16px; }
  .piede-colonna { gap: 0; }
  .piede-tit { margin-bottom: 2px; }
  .piede-colonna a { min-height: 40px; display: flex; align-items: center; }
  .piede-basso { margin-top: 14px; padding-top: 10px; gap: 2px; }
  .piede-basso a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------- Animazioni ----------
   Tutte qui, e solo se il sistema non chiede di ridurre il movimento.
   Le comparse nascondono un elemento solo se lo script gli ha dato .rv:
   senza script, o con «riduci movimento», tutto è visibile da subito. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .rv.fatto { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }

  .dimorino { animation: oscilla 5.5s ease-in-out infinite; }
  @keyframes oscilla { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

  .timer-cifra.scatta { animation: scatta .45s cubic-bezier(.2, .7, .2, 1); }
  @keyframes scatta { 0% { opacity: .35; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }

  .alone::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(closest-side, rgba(159, 209, 180, .22), transparent 70%);
    animation: alone 14s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes alone { 0% { transform: translate(-22%, -8%); } 100% { transform: translate(22%, 10%); } }

  .campo { transition: box-shadow .18s ease, border-color .18s ease; }
  .btn { transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
  .scheda, .scheda-scura { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
  .domanda-segno::after { transition: transform .2s ease; }
  .interruttore-voce { transition: background-color .18s ease, color .18s ease; }
  .puntini span { transition: width .2s ease, background-color .2s ease; }

  /* La barra che segue entra dall'alto. */
  @media (max-width: 1200px) {
    [data-barra="fissa"] .testata-barra { animation: barra-entra .22s ease-out; }
  }
  @keyframes barra-entra { from { transform: translateY(-100%); } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 8px 20px rgba(28, 58, 46, .18); }
  .scheda:hover, .js .rv.in.scheda:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28, 58, 46, .12); }
  .scheda-scura:hover, .js .rv.in.scheda-scura:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
  /* Una domanda aperta si legge: non si solleva sotto il mouse. */
  .domanda:hover, .js .rv.in.domanda:hover { transform: none; }
  /* Nemmeno un piano: le tre schede restano alla stessa altezza, quella sotto il mouse si distingue
     con l'ombra e il bordo. */
  .piano:hover, .js .rv.in.piano:hover { transform: none; border-color: var(--verde-chiaro); }
}
@media (hover: hover) {
  .interruttore-voce[aria-pressed="false"]:hover { background: var(--menta); }
}