/* ==========================================================================
   Pagina "Segnala & Guadagna" — intestazione, blocco app, FAQ
   ========================================================================== */

/* --- Computer o telefono ------------------------------------------------- */

/* Il QR e il bottone «Apri l'app» sono la stessa azione servita al mezzo
   giusto: il QR porta l'app dal computer al telefono, e su un telefono non si
   può inquadrare col telefono stesso. Quindi non convivono.
   Soglia a 780px, la stessa in tutta la pagina. */
@media (min-width: 781px) {
  .solo-mobile { display: none !important; }
}
@media (max-width: 780px) {
  .solo-desktop { display: none !important; }
}

/* --- Intestazione di pagina ---------------------------------------------- */

.page-hero {
  background: var(--c-ink);
  color: #fff;
  padding: var(--sp-8) 0 var(--sp-8);
}
.page-hero .eyebrow { color: var(--c-brass-light); }
.page-hero h1 { color: #fff; max-width: 16em; }

/* Il titolo occupa la colonna larga, il rimando all'app quella stretta: senza
   la seconda colonna metà dell'apertura resta vuota su desktop. */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 980px) {
  .page-hero__grid { grid-template-columns: 1fr; }
}

.page-hero__lead {
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  color: #c6d4de;
  max-width: 40em;
  margin-bottom: 1.6em;
}
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.breadcrumb {
  font-size: 0.8rem;
  color: #8ba2b4;
  margin: 0 0 var(--sp-5);
}
.breadcrumb a { color: #c6d4de; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 0.5em; }

@media (max-width: 640px) {
  .page-hero__cta .btn { width: 100%; }
}

/* --- Rimando all'app in apertura ----------------------------------------- */

/* Riquadro chiaro sul fondo scuro: si stacca senza diventare un secondo hero.
   Da telefono apre l'app direttamente; il QR grande e la schermata stanno
   in #app. */
.hero-app {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.hero-app__occhiello {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brass-light);
  margin: 0 0 var(--sp-3);
}
.hero-app__claim {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 var(--sp-4);
}
.hero-app__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6em;
}
.hero-app__lista li {
  position: relative;
  padding-left: 1.4em;
  font-size: 0.88rem;
  color: #c6d4de;
}
.hero-app__lista li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--c-brass-light);
}
.hero-app__giu {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Il QR è navy su fondo trasparente: sul blu scuro sparirebbe, gli serve una
   piastra bianca sotto. */
.hero-app__qr {
  flex: none;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px;
  line-height: 0;
}
.hero-app__qr img { width: 64px; height: 64px; }
.hero-app__giu p { margin: 0; font-size: 0.82rem; color: #a9bccb; }
.hero-app__giu p a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.hero-app__giu p a:hover { border-bottom-color: #fff; }

/* Da telefono: bottone chiaro sul fondo scuro della scheda, la riga sotto. */
.hero-app__giu--mobile { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.app-apri {
  display: flex;
  justify-content: center;
  background: #fff;
  color: var(--c-ink);
  border-radius: var(--radius-pill);
  padding: 0.7em 1em;
  font-size: 0.94rem;
  font-weight: 600;
}
.app-apri:hover { background: var(--c-paper); color: var(--c-ink); }

@media (max-width: 980px) {
  .hero-app { width: 100%; }
}

/* Il meccanismo in tre battute, dentro l'apertura: cosa dai, cosa prendi, da
   dove lo segui. Sta prima di ogni sezione perché è la cosa che decide se una
   persona continua a leggere o chiude la pagina. */
.prove {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.prove li {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: "n titolo" ".  testo";
  column-gap: var(--sp-3);
  /* start, non center: con testi di lunghezza diversa i tre titoli si
     disallineerebbero di qualche pixel, e in fila si vede. */
  align-items: start;
}
.prove__n {
  grid-area: n;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-brass);
  color: var(--c-brass-light);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prove strong {
  grid-area: titolo;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.prove li > span:last-child {
  grid-area: testo;
  margin-top: 0.35em;
  font-size: 0.86rem;
  color: #a9bccb;
}
.prove sup {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--c-brass-light);
  vertical-align: super;
  line-height: 0;
}
.prove a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.prove a:hover { border-bottom-color: #fff; }

@media (max-width: 780px) {
  .prove { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* --- Chi puoi segnalare -------------------------------------------------- */

/* Casi concreti invece di una definizione: «amici e parenti» è astratto, «il
   collega che si trasferisce» fa venire in mente una persona precisa. */
.casi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.caso {
  background: var(--c-surface);
  /* Bordo uguale sui quattro lati: la barretta di colore su un lato solo
     e una decorazione che non dice niente — sei schede identiche non hanno
     un lato piu importante degli altri — e si legge come un riempitivo. */
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.caso:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.caso strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.35em;
}
.caso span { font-size: 0.88rem; color: var(--c-ink-soft); }

.casi__nota {
  margin: var(--sp-5) 0 0;
  max-width: 62em;
  font-size: 0.86rem;
  color: var(--c-ink-soft);
}

@media (max-width: 900px) { .casi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .casi { grid-template-columns: 1fr; } }

/* --- Discrezione --------------------------------------------------------- */

/* Due colonne affiancate, cosa diciamo e cosa non diciamo. Messe una accanto
   all'altra si leggono come una promessa sola; separate in due sezioni
   diventerebbero due elenchi da confrontare a memoria. */
.discrezione {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--sp-5);
}
.discrezione__col { padding: clamp(24px, 3vw, 36px); }
.discrezione__col + .discrezione__col { border-left: 1px solid var(--c-line); }
.discrezione__col h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-4);
}
.discrezione .ticks { margin-bottom: 0; }
.discrezione .ticks li { font-size: 0.92rem; }
.discrezione .tick--no { color: var(--c-ink-soft); }

@media (max-width: 780px) {
  .discrezione { grid-template-columns: 1fr; }
  .discrezione__col + .discrezione__col {
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
}

/* --- Premio -------------------------------------------------------------- */

/* La prima scheda è più larga e su fondo scuro: la cifra è il motivo per cui
   una persona legge questa pagina, e tre schede identiche la annegavano fra le
   altre due. */
.premio {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}
.premio__card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
/* Stesso padding delle altre due: cambiarlo sfalserebbe di dieci pixel gli
   occhielli delle tre schede, che in fila si leggono come una riga sola. */
.premio__card--principale {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #fff;
  box-shadow: var(--shadow);
}

/* Quando arriva: la riga che trasforma una cifra in una promessa datata */
.premio__quando {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brass);
  margin: 0 0 var(--sp-3);
}
.premio__card--principale .premio__quando { color: var(--c-brass-light); }

.premio__n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  line-height: 1.1;
  margin-bottom: 0.2em;
}
.premio__card--principale .premio__n {
  font-size: clamp(3rem, 6vw, 4.2rem);
  color: #fff;
  margin-bottom: 0.15em;
}
.premio__n sup {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-brass);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
}
.premio__card--principale .premio__n sup { font-size: 1.1rem; color: var(--c-brass-light); }

.premio__card h3 { font-family: var(--font-body); font-size: 0.98rem; margin-bottom: 0.35em; }
.premio__card--principale h3 { color: #fff; font-size: 1.06rem; }
.premio__card p { font-size: 0.9rem; color: var(--c-ink-soft); margin: 0; }
.premio__card--principale p { color: #c6d4de; font-size: 0.94rem; }

/* --- Livelli del bonus ---------------------------------------------------- */

/* Un blocco scuro a tutta larghezza sotto le due schede: è la parte del premio
   che fa segnalare più di una volta, e deve pesare quanto la cifra principale.
   I tre gradini salgono di altezza da sinistra a destra, così la scala si vede
   prima ancora di leggerla. */
.livelli {
  margin-top: var(--sp-5);
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--shadow);
}
.livelli__testa { max-width: 46rem; margin-bottom: var(--sp-5); }
.livelli__testa .premio__quando { color: var(--c-brass-light); }
.livelli__testa h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: #fff;
  margin: 0 0 0.4em;
}
.livelli__testa p:last-child { color: #c6d4de; margin: 0; }

/* Il trofeo sta nell'ultimo gradino, sopra la cifra più alta: è il premio
   della scala, e il gradino più alto è l'unico che ha spazio per tenerlo
   grande. Sta in alto nel gradino e il testo resta appoggiato in basso. */
.livelli__trofeo {
  flex: none;
  width: clamp(3rem, 6vw, 4rem);
  height: clamp(3rem, 6vw, 4rem);
  margin: 0 0 var(--sp-3);
  color: var(--c-brass-light);
}
@media (min-width: 821px) {
  .livelli__trofeo { margin-bottom: auto; }
}

.livelli__scala {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: end;
}
.livelli__gradino {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 0.2em;
  padding: var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}
.livelli__gradino:nth-child(1) { min-height: 7rem; }
.livelli__gradino:nth-child(2) { min-height: 9.5rem; }
.livelli__gradino:nth-child(3) {
  min-height: 12.5rem;
  border-color: var(--c-brass-light);
  background: rgba(217, 178, 106, 0.12);
}
.livelli__soglia {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brass-light);
}
.livelli__n {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}
.livelli__nota { font-size: 0.9rem; color: #c6d4de; }

.livelli__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.livelli__piede p { margin: 0; max-width: 40rem; color: #c6d4de; }
.livelli__piede strong { color: #fff; }

@media (max-width: 820px) {
  .livelli__scala { grid-template-columns: 1fr; }
  .livelli__gradino:nth-child(n) { min-height: 0; }
}

.premio__nota {
  margin: var(--sp-4) 0 0;
  max-width: 62em;
  font-size: 0.86rem;
  color: var(--c-ink-soft);
}
.premio__nota sup { color: var(--c-brass); font-weight: 700; }

@media (max-width: 820px) { .premio { grid-template-columns: 1fr; } }

/* --- Blocco app ---------------------------------------------------------- */

/* Una scena, non una scheda: a sinistra il perché, a destra il telefono su un
   palco caldo, con le onde del «segnale» che partono dallo schermo e tre
   notifiche che raccontano il ciclo (inviata → firmato → bonus). Il fondo resta
   nella famiglia della carta e dell'ottone: niente masse scure accanto alla
   pagina crema. */
.app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 64px);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(217, 178, 106, 0.28), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(176, 52, 42, 0.07), transparent 60%),
    linear-gradient(160deg, #fffdf9 0%, var(--c-paper-alt) 100%);
  overflow: hidden;
  isolation: isolate;
}

.app__testo { position: relative; z-index: 2; }

.app__titolo {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}
.app__titolo em {
  font-style: italic;
  color: var(--c-accent);
}

.app__lead {
  font-size: 1.06rem;
  color: var(--c-ink-soft);
  max-width: 30em;
  margin: 0 0 var(--sp-6);
}

/* Tre punti, ognuno con la sua icona in un tondo d'ottone */
.app__punti {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.app__punti li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.app__punti strong {
  display: block;
  color: var(--c-ink);
  font-size: 1rem;
  margin-bottom: 0.1em;
}
.app__icona {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-surface);
  border: 1px solid rgba(185, 140, 66, 0.45);
  box-shadow: 0 4px 12px rgba(185, 140, 66, 0.16);
  color: var(--c-brass);
}
.app__icona svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app__apri .btn { font-size: 1.05rem; padding-block: 1.05em; }
.app__passo {
  margin: var(--sp-3) 0 0;
  font-size: 0.86rem;
  color: var(--c-ink-soft);
}

/* Il QR come un biglietto: carta bianca, angolari d'ottone attorno al codice
   che dicono «inquadrami» senza bisogno di spiegarlo. */
.biglietto {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: 480px;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.biglietto__qr {
  position: relative;
  flex: none;
  padding: 10px;
  line-height: 0;
  background:
    linear-gradient(var(--c-brass), var(--c-brass)) top left / 16px 2px,
    linear-gradient(var(--c-brass), var(--c-brass)) top left / 2px 16px,
    linear-gradient(var(--c-brass), var(--c-brass)) top right / 16px 2px,
    linear-gradient(var(--c-brass), var(--c-brass)) top right / 2px 16px,
    linear-gradient(var(--c-brass), var(--c-brass)) bottom left / 16px 2px,
    linear-gradient(var(--c-brass), var(--c-brass)) bottom left / 2px 16px,
    linear-gradient(var(--c-brass), var(--c-brass)) bottom right / 16px 2px,
    linear-gradient(var(--c-brass), var(--c-brass)) bottom right / 2px 16px;
  background-repeat: no-repeat;
}
.biglietto__qr img { width: 104px; height: 104px; }
.biglietto p { margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); line-height: 1.5; }
.biglietto strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--c-ink);
  margin-bottom: 0.25em;
  white-space: nowrap;
}
.biglietto__gratis {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brass);
}

/* --- Il palco del telefono --- */

.palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 600px;
  z-index: 1;
}

/* Un disco d'ottone chiaro dietro il telefono, e tre anelli che si allargano:
   il segnale che parte. */
.palco::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 178, 106, 0.42) 0%, rgba(217, 178, 106, 0.14) 55%, transparent 72%);
}
.palco__onde {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.palco__onde i {
  grid-area: 1 / 1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1.5px solid rgba(185, 140, 66, 0.5);
  animation: onda 6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  opacity: 0;
}
.palco__onde i:nth-child(2) { animation-delay: 2s; }
.palco__onde i:nth-child(3) { animation-delay: 4s; }
@keyframes onda {
  0%   { transform: scale(0.7); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Il telefono: cornice sottile, leggera inclinazione, ombra calda */
.telefono {
  position: relative;
  z-index: 1;
  margin: 0;
  /* Larghezza fissa: con una percentuale il browser ripiega sulla larghezza
     intrinseca dell'immagine e allarga la colonna. */
  width: 270px;
  max-width: 100%;
  border-radius: 40px;
  padding: 7px;
  background: linear-gradient(145deg, #3a4a58, var(--c-ink) 40%, #1c3346);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 40px 70px -20px rgba(122, 82, 30, 0.45),
    0 18px 30px -12px rgba(18, 41, 60, 0.35);
  transform: rotate(-4deg);
  /* L'immagine è inline: senza questo resta qualche pixel sotto lo schermo. */
  line-height: 0;
}
.telefono img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 33px;
}

/* Le notifiche: carta bianca che galleggia attorno al telefono */
.notifica {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 14px 30px -10px rgba(18, 41, 60, 0.22);
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  line-height: 1.3;
  white-space: nowrap;
  animation: galleggia 7s ease-in-out infinite;
}
.notifica strong { display: block; color: var(--c-ink); font-size: 0.86rem; }
.notifica__pallino {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  background: #f6dcd5;
  color: var(--c-accent);
}
.notifica__pallino--ok { background: var(--c-ok-bg); color: var(--c-ok); }
.notifica__pallino--ottone { background: var(--c-warn-bg); color: var(--c-warn); }

.notifica--alto  { top: 3%; left: 0; }
.notifica--basso { bottom: 4%; right: -2%; animation-delay: -2.3s; }
.notifica--lato  { top: 44%; right: -6%; animation-delay: -4.6s; }

@keyframes galleggia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .palco__onde i, .notifica { animation: none; }
  .palco__onde i:first-child { opacity: 0.5; transform: scale(1.35); }
}

@media (max-width: 1080px) {
  .notifica--lato { display: none; }
  .notifica--alto { left: 0; }
  .notifica--basso { right: 0; }
}

@media (max-width: 900px) {
  /* impilato: prima testo e bottone, il telefono sotto come conferma visiva */
  .app { grid-template-columns: 1fr; }
  .palco { min-height: 540px; }
  .telefono { transform: rotate(-3deg); }
}

@media (max-width: 480px) {
  .app { padding: 28px 20px 12px; border-radius: 12px; }
  .palco { min-height: 580px; margin-inline: -8px; }
  .palco::before { width: 340px; height: 340px; }
  .palco__onde i { width: 240px; height: 240px; }
  .telefono { width: 232px; border-radius: 36px; }
  .telefono img { border-radius: 30px; }
  .notifica { font-size: 0.72rem; padding: 8px 12px 8px 8px; }
  .notifica strong { font-size: 0.8rem; }
  .notifica__pallino { width: 28px; height: 28px; }
  .notifica--alto { top: 2%; left: -4px; }
  .notifica--basso { bottom: 0; right: -4px; }
}

/* --- FAQ ----------------------------------------------------------------- */

.faq { display: grid; gap: var(--sp-2); max-width: 820px; }
.faq details {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--c-brass);
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0.9em 0 0;
  font-size: 0.92rem;
  color: var(--c-ink-soft);
}

/* --- Form in pagina ------------------------------------------------------ */

.segnala-form__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .segnala-form__grid { grid-template-columns: 1fr; } }