/* ============================================================
   Pagina Contatti (/contatti.html)
   ============================================================ */

/* ── Campi form flat-moderni ── */
.field {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: .625rem;
  background: rgba(255,255,255,.6);
  padding: .65rem .85rem;
  font-size: .85rem;
  color: #111827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: #9ca3af; }
.field:hover  { border-color: #93c5fd; }
.field:focus  { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.dark .field  { background: rgba(31,41,55,.5); border-color: #4b5563; color: #f9fafb; }
.dark .field::placeholder { color: #9ca3af; }
.dark .field:hover { border-color: #60a5fa; }
.dark .field:focus { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }

.field-label {
  display: block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  color: #6b7280; margin-bottom: .35rem;
}
.dark .field-label { color: #9ca3af; }

/* ── Pannello morbido integrato (form + blocco contatti) ──
   Semi-trasparente: lascia trasparire la griglia del body,
   niente sfondo bianco pieno né header a griglia. */
.panel-soft {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229,231,235,.8);
  border-radius: 1.25rem;
}
.dark .panel-soft {
  background: rgba(31,41,55,.5);
  border-color: rgba(75,85,99,.6);
}

/* ── Card "Come unirti" (modulari, spigoli rounded ognuna) ── */
.step-card {
  position: relative;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 1.25rem;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(37,99,235,.35);
  border-color: rgba(147,197,253,.9);
}
.dark .step-card { background: rgba(31,41,55,.55); border-color: rgba(75,85,99,.7); }
.dark .step-card:hover { border-color: rgba(96,165,250,.7); }

.step-num {
  position: absolute; top: 1rem; right: 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 1.75rem; line-height: 1;
  color: #e5e7eb; user-select: none;
}
.dark .step-num { color: #374151; }

/* mini-mock interno alle card (skeleton soft) */
.mock { background: rgba(246,248,255,.8); border: 1px solid rgba(37,99,235,.08); border-radius: .9rem; }
.dark .mock { background: rgba(15,23,42,.6); border-color: rgba(99,102,241,.12); }
.mock-bar { background: #e5e7eb; border-radius: 999px; }
.dark .mock-bar { background: #4b5563; }
.mock-bar.accent { background: #2563eb; }

/* ── Social icon button ── */
.soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: .75rem;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,.6);
  color: #374151;
  transition: transform .15s, border-color .15s, color .15s, background-color .15s;
}
.soc:hover { transform: translateY(-2px); border-color: #93c5fd; color: #2563eb; }
.dark .soc { background: rgba(31,41,55,.55); border-color: #4b5563; color: #d1d5db; }
.dark .soc:hover { border-color: #60a5fa; color: #93c5fd; }