/* Il vestito dell'informativa.
 *
 * L'indice e l'informativa sono due pagine diverse: una racconta, con le
 * sue fasce e i suoi telefoni; l'altra è un testo da leggere e basta, che
 * qualcuno apre dal Play Store per sapere dove finiscono i suoi dati.
 *
 * Quindi qui c'è solo quello che serve a un testo lungo: un foglio bianco
 * arrotondato sul campo azzurrino del sito, una colonna stretta, righe che si
 * leggono, e il resto — i colori, i caratteri, i tasti — preso da
 * `stile.css`, che la pagina carica prima di questo.
 */

body {
  background: var(--campo);
}

.dentro {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

/* ── La testa ──────────────────────────────────────────────────────────── */

.riga-di-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--cappello-alto);
  margin-bottom: clamp(24px, 4vw, 40px);
}

header.stretta {
  padding: 0;
}

header.stretta h1 {
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.indietro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--inchiostro);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.indietro img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.dentro .indietro {
  color: var(--inchiostro);
}

.dentro .indietro:hover {
  color: var(--blu);
}

.sottotitolo-informativa {
  display: inline-block;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blu-chiaro);
  color: var(--blu-scuro);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ── Il foglio ─────────────────────────────────────────────────────────── */

/* Le sezioni stanno tutte su un foglio bianco: la prima lo apre, l'ultima lo
 * chiude. Fra un capitolo e l'altro solo aria, niente righe. Il foglio non ha
 * ombra: un'ombra per sezione si vedrebbe come una riga chiara a ogni
 * giuntura, e un'ombra sola non c'e' dove metterla. */
.dentro section {
  background: var(--carta);
  padding: 8px clamp(20px, 4vw, 48px) 8px;
}

.dentro section:first-of-type {
  border-radius: var(--raggio) var(--raggio) 0 0;
  padding-top: clamp(28px, 4vw, 44px);
}

.dentro section:last-of-type {
  border-radius: 0 0 var(--raggio) var(--raggio);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.dentro section h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin: 28px 0 12px;
}

.dentro p,
.dentro li {
  color: var(--inchiostro-lieve);
}

.dentro p strong,
.dentro li strong {
  color: var(--inchiostro);
}

.dentro ol,
.dentro ul {
  margin: 0 0 1em;
  padding-left: 24px;
}

.dentro li {
  margin-bottom: 10px;
}

/* I collegamenti qui si devono vedere: in mezzo a un testo di legge, un link
 * dello stesso colore del testo è un link che nessuno trova. */
.dentro a {
  color: var(--blu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.dentro .indietro,
.dentro footer a {
  text-decoration: none;
}

/* ── Il fondo ──────────────────────────────────────────────────────────── */

.dentro footer {
  margin-top: 32px;
  padding: 8px 0 72px;
  color: var(--inchiostro-lieve);
  font-size: 0.92rem;
}

.dentro footer p {
  margin: 0 0 6px;
}

.dentro footer a {
  color: var(--inchiostro-lieve);
  font-weight: 600;
}

.dentro footer a:hover {
  color: var(--blu);
}