:root { color-scheme: light dark; }

/**
 * NIENTE ZOOM COL DOPPIO TOCCO, su tutto il sito.
 *
 * Il doppio tocco per ingrandire è un'eredità dei siti fatti per il computer
 * e guardati sul telefono. Su un sito pensato per il telefono fa solo danni:
 * il browser aspetta 300 millesimi dopo ogni tocco per vedere se ne arriva un
 * secondo, e intanto tutto sembra lento. E capita da solo, quando non lo vuoi.
 *
 * `manipulation` toglie il doppio tocco e lascia lo scorrimento e la pinza:
 * chi ha bisogno di ingrandire lo può ancora fare. Togliere anche quella
 * (`user-scalable=no`) sarebbe chiudere la porta a chi non ci vede bene —
 * e comunque Safari la ignora da anni.
 */
html,
body {
    /* su Safari metterlo solo su html non basta: va detto anche al corpo */
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

/**
 * I campi non scendono MAI sotto i 16px.
 * Sotto quella misura iOS ingrandisce la pagina da solo appena tocchi
 * un campo, e poi resta ingrandita: sembra che il sito si sia rotto.
 */
input, select, textarea, button {
    font-size: 16px;
}

/**
 * Quello che si tocca non è testo.
 *
 * Tenendo premuto un bottone, iOS entra in modalità selezione: vibra, e
 * offre «Copia / Cerca / Condividi» sopra un'icona. Non è un premio —
 * è il sistema che ha capito male cosa hai in mano, perché per lui
 * qualunque cosa sullo schermo è testo finché non gli si dice il contrario.
 *
 * `user-select: none` glielo dice. `-webkit-touch-callout: none` toglie
 * anche il menu che compare tenendo premuto un collegamento.
 *
 * Il testo vero resta selezionabile: qui si parla solo di bottoni e icone.
 */
a, button, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: #0d1b2a;
    color: #e8f1f8;
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.centro {
    min-height: 100svh;
    display: grid;
    place-items: center;
}

.centro h1 {
    margin: 0;
    font-size: clamp(3rem, 18vw, 11rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

/* --- spina dorsale --- */
.sito { min-height: 100svh; }

/* --- card: il contenuto è uguale, cambia il layout --- */
.card { background: rgba(255,255,255,.06); border-radius: 12px; overflow: hidden; }
.card--orizzontale { display: flex; gap: 1rem; align-items: stretch; }
.card--orizzontale .card-img { width: 40%; object-fit: cover; }
.card--verticale .card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-corpo { padding: .9rem 1rem; }
.card-titolo { margin: 0 0 .3rem; font-size: 1.05rem; }
.card-testo { margin: 0; opacity: .75; font-size: .9rem; }

/* --- modal --- */
.modal { position: fixed; inset: 0; display: grid; background: rgba(0,0,0,.5); }
.modal--centrato { place-items: center; }
.modal--foglio { align-items: end; }
.modal-riquadro { background: #12293f; border-radius: 14px; padding: 1.2rem; max-width: 32rem; width: 92%; }
.modal--foglio .modal-riquadro { width: 100%; border-radius: 14px 14px 0 0; }
.modal-maniglia { width: 2.5rem; height: .25rem; border-radius: 2px; background: rgba(255,255,255,.3); margin: 0 auto .8rem; }

/* --- aree --- */
.landing { min-height: 100svh; }
.sottotitolo { opacity: .6; margin: .4rem 0 0; }
.colonna { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.2rem; display: grid; gap: .8rem; }
.colonna h1 { margin: 0 0 .6rem; font-size: 1.8rem; }

/* ═══ LA PAGINA DEL SEGRETO DI UNA PORTA ═══════════════════════════════════
   Una riga, un campo, un bottone: chi ci arriva ha in mano un QR e un codice
   scritto su un foglietto, e sta in piedi davanti a una porta. */

/* ═══ DA DOVE VENGONO I DATI ═══════════════════════════════════════════════ */
.lic{ max-width:44rem; margin:0 auto; padding:2.5rem 1rem 4rem; }
.lic-tit{ margin:0 0 .3rem; font-size:1.7rem; }
.lic-sotto{ margin:0 0 1.8rem; color:#aab6c2; }
.lic-card{ padding:1.1rem 1.2rem; margin-bottom:.9rem; border-radius:14px;
  background:linear-gradient(168deg,#e6ecf3 0%,#dde5ee 100%);
  box-shadow:0 10px 24px -16px rgba(16,40,70,.5),
             inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(38,58,92,.12); }
.lic-card h2{ display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem;
  font-size:1.02rem; color:#12314f; }
.lic-card h2 i{ font-size:.9rem; color:#4a7cc8; }
.lic-card p{ margin:.3rem 0; font-size:.92rem; line-height:1.55; color:#3d4d5c; }
/* Gli elenchi dentro una carta (la privacy ne ha due): lo stesso inchiostro dei
   paragrafi. Senza questa riga prendevano il chiaro della pagina scura intorno
   — bianco su una carta quasi bianca. */
.lic-card ul{ margin:.4rem 0; padding-left:1.2rem; }
.lic-card li{ margin:.25rem 0; font-size:.92rem; line-height:1.55; color:#3d4d5c; }
.lic-card li strong, .lic-card p strong{ color:#12314f; }
.lic-meta{ font-size:.82rem !important; color:#7a8a99 !important; }
/* Fuori dalle carte il fondo è il blu della notte: lì il grigio delle carte non
   si legge, ci vuole un chiaro. */
.lic > .lic-meta{ color:#aab6c2 !important; }
.lic-card a{ color:#2f5fa8; font-weight:700; }
.lic-foto{ margin:.6rem 0 .4rem; padding-left:1.1rem; }
.lic-foto li{ font-size:.82rem; line-height:1.6; color:#5b7086; }
.lic-foto b{ color:#12314f; }
.lic-foto em{ font-style:normal; color:#7a8a99; }