/* La pagina /contatti come pagina autonoma. Va caricata DOPO `sito.css`.
   ⚠️⚠️ È una COPIA delle regole `.ct-*` in linea dentro `index.html` (dove la vista
   `#contatti` esiste ancora): se cambia una, va cambiata l'altra.
   Il bottone pieno e il resto dei pezzi condivisi stanno in `componenti.css`. */

.ct-in { max-width: 720px; margin: 0 auto; padding: 64px 28px 72px; }
/* ⚠️ Il titolo è un occhiello (`.lp-occhiello`), non un titolo serif: la regola generica
   `.ct-in h1` che stava qui era più specifica della classe e la scavalcava. */
.ct-in h1.lp-occhiello { margin: 0 0 16px; }
.ct-intro { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin: 0 0 30px; }
/* Un campo per riga, a tutta larghezza: un modulo che si compila dall'alto in basso
   senza dover decidere dove guardare. */
.ct-griglia { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ct-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px;
  color: var(--muted); font-weight: 600; }
.ct-campo input, .ct-campo textarea { font-size: 14.5px; padding: 11px 13px; border-radius: 9px;
  border: 1px solid rgba(28,47,54,.15); font-family: inherit; color: var(--ink);
  background: #fff; outline: none; width: 100%; box-sizing: border-box; }
.ct-campo input:focus, .ct-campo textarea:focus { border-color: var(--brand); }
/* ⚠️ `resize: vertical` e non `both`: allargandolo in orizzontale uscirebbe dalla colonna
   e scomporrebbe la griglia. Chi scrive un messaggio lungo ha bisogno di altezza. */
.ct-campo textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.ct-obbl { color: var(--brand); }
.ct-nota { font-size: 12.5px; color: var(--faint); margin: 18px 0 0; line-height: 1.5; }
/* Titolo della pagina, sotto l'occhiello: la domanda con cui ci si arriva. */
.ct-titolo { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.2;
  margin: 0 0 14px; color: var(--ink); }
/* Il tasto sta a destra, in fondo alla colonna dei campi: è l'ultimo gesto, e cade dove
   finisce lo sguardo di chi ha appena compilato l'ultima riga. */
.ct-invia { margin-top: 22px; display: block; margin-left: auto; }
.ct-esito { margin-top: 18px; font-size: 14px; border-radius: 9px; padding: 11px 14px; }
.ct-esito.ok { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.ct-esito.ko { background: #fdecea; border: 1px solid #ef9a9a; color: #b71c1c; }
/* Il messaggio di riuscita se ne va da solo: 5 secondi fermo, poi 2 di dissolvenza.
   ⚠️ La transizione sta sulla classe che lo fa sparire, non su `.ct-esito`: così quando
   riappare torna pieno all'istante, invece di svanire e riapparire in dissolvenza. */
.ct-esito.sfuma { opacity: 0; transition: opacity 2s ease; }