/* ============================================================
   ESTETICA CRISTINA — Contatti
   Sezione di conversione (titolo + CTA): indirizzo, telefono,
   email e orari vivono solo nel footer subito sotto — ripeterli
   qui sarebbe ridondante.
   ============================================================ */

.contatti {
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding-block: var(--sp-xxl);
}

.contatti__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-lg);
}
.contatti__title { color: var(--text-light); margin: 0 0 var(--sp-sm); }
.contatti__lede { max-width: 42ch; color: var(--text-light-muted); }

/* ─── Azioni rapide + form richiudibile ──────────────────────
   Il modulo (nome/email/messaggio) resta nascosto finché non lo
   si richiede esplicitamente: due CTA dirette bastano nella
   maggior parte dei casi, il form è un passo in più per chi
   preferisce scrivere invece di chiamare. */
.contatti__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.contatti__form-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}
.contatti__form-collapse.is-open { grid-template-rows: 1fr; }
.contatti__form-collapse-inner { overflow: hidden; }
.contatti__form { padding-top: var(--sp-lg); }

.form-field { margin-bottom: var(--sp-md); }
.form-field label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  margin-bottom: 0.5rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-light);
  padding-block: 0.6rem;
  color: var(--text-light);
  font-size: var(--text-base);
  transition: border-color var(--t-fast);
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent); }
.form-field textarea { resize: vertical; min-height: 90px; }

.form-note {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  margin-bottom: var(--sp-sm);
}
.form-note a { color: var(--text-light); text-decoration: underline; text-underline-offset: 3px; }
.form-note a:hover { color: var(--accent); }

.form-status {
  font-size: var(--text-sm);
  color: var(--accent);
  margin-top: var(--sp-sm);
  min-height: 1.2em;
}