/* Schede contatto — impaginate come una pagina di aitrack.it, non come una
   scatola centrata. Valori presi dal sito vivo (misurati il 16/09/2026) e dai
   token in apps/web/src/styles/index.css: canvas #f7f8fa, filetto #e6e8ec,
   testo #0b1220 / #4b5563 / #6b7280, marchio #006ce6, Poppins per i titoli e
   Inter per il corpo. Il footer replica FooterNew.scss: stesse misure, stesse
   gerarchie, stessi colori. Nessuna risorsa esterna: font serviti in locale. */

@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:400; src:url('./fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:600; src:url('./fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-display:swap; font-weight:600; src:url('./fonts/poppins-latin-600-normal.woff2') format('woff2'); }

:root {
  --canvas:#f7f8fa; --surface:#ffffff;
  --border:#e6e8ec; --border-strong:#d5d8de;
  --text:#0b1220; --text-muted:#4b5563; --text-subtle:#6b7280;
  --brand:#006ce6; --brand-hover:#0058bf; --brand-soft:#e6f0fd;
  --font-display:'Poppins','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }

body {
  font-family:var(--font-body);
  color:var(--text);
  background:var(--canvas);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.contenitore { width:100%; max-width:600px; margin:0 auto; padding:0 20px; }

/* ---------- Banner e profilo ---------- */

.principale { padding:0 0 56px; }

.banner {
  height:184px;
  background-image:linear-gradient(180deg, rgba(0,108,230,.18), rgba(0,108,230,.06)), var(--banner);
  background-size:cover, cover;
  background-position:center, center;
  background-color:var(--brand-soft);
  border-bottom:1px solid var(--border);
}

.profilo { max-width:560px; margin:0 auto; text-align:center; }

/* L'avatar sta a cavallo del bordo: 128px con margine superiore di -64,
   cioe' esattamente meta' dentro il banner e meta' fuori. */
.profilo__avatar {
  width:128px; height:128px; margin:-64px auto 14px;
  border-radius:9999px; overflow:hidden; position:relative;
  background:var(--brand-soft);
  border:4px solid var(--surface);
  box-shadow:0 8px 20px -10px rgba(11,18,32,.25);
  display:grid; place-items:center;
}
.profilo__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profilo__iniziali { font-family:var(--font-display); font-size:42px; color:var(--brand); line-height:1; }

.profilo__nome { font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-0.02em; margin:0 0 2px; }
.profilo__ruolo { font-size:15px; color:var(--text-muted); margin:0 0 22px; }

/* ---------- Contatti rapidi in riga ---------- */

.contatti-rapidi { display:flex; justify-content:center; gap:12px; margin:0 0 32px; }

.contatti-rapidi a {
  display:grid; place-items:center;
  width:52px; height:52px;
  border:1px solid var(--border); border-radius:9999px;
  background:var(--surface); color:var(--text-muted);
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.contatti-rapidi a:hover { color:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
.contatti-rapidi a:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- Prenotazione ---------- */

.azione-prenota {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 20px; margin:0 0 30px;
  border:1px solid var(--brand); border-radius:12px;
  background:var(--brand); color:#fff;
  font-size:14.5px; font-weight:600; text-decoration:none;
  box-shadow:0 8px 20px -8px rgba(0,108,230,.45);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.azione-prenota:hover { background:var(--brand-hover); border-color:var(--brand-hover); transform:translateY(-1px); }
.azione-prenota:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }

/* ---------- Azioni ---------- */

.sezione__titolo {
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--text-subtle);
  margin:0 0 12px; text-align:left;
}

.elenco {
  list-style:none; margin:0 0 28px; padding:0; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  overflow:hidden;
}
.elenco li + li { border-top:1px solid var(--border); }

.elenco a {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; text-decoration:none; color:var(--text);
  font-size:14px; font-weight:600;
  transition:background .18s ease;
}
.elenco a:hover { background:var(--canvas); }
.elenco a:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.elenco .freccia { color:var(--text-subtle); flex:none; }

/* ---------- Footer: replica di FooterNew.scss ---------- */

.footer-sito {
  margin-top:8px;
  background:var(--canvas); color:var(--text-muted);
  font-family:var(--font-body); font-size:14px;
  padding:44px 0 32px; border-top:1px solid var(--border);
}

.footer-sito__griglia { margin-bottom:40px; }

.footer-sito__logo svg { height:24px; width:auto; margin-bottom:14px; color:#000; }
.footer-sito__desc { font-size:13px; line-height:1.6; color:var(--text-subtle); margin:0 0 20px; max-width:280px; }

.footer-sito__badge { display:flex; gap:8px; margin-bottom:20px; }
.footer-sito__badge img { height:34px; width:auto; opacity:.8; transition:opacity .2s; }
.footer-sito__badge a:hover img { opacity:1; }

.footer-sito__social { display:flex; gap:14px; }
.footer-sito__social a { display:inline-flex; padding:13px; margin:-13px; color:var(--text-subtle); transition:color .2s; }
.footer-sito__social a:hover { color:var(--text); }


.footer-sito__fine { border-top:1px solid var(--border); padding-top:20px; }
.footer-sito__copy { font-size:12px; color:var(--text-subtle); line-height:1.6; }
.footer-sito__copy p { margin:0; }
.footer-sito__copy-primaria { font-weight:500; color:var(--text-muted); }
.footer-sito__copy-secondaria { margin-top:3px; }
.footer-sito__copy a { color:var(--text-subtle); text-decoration:underline; text-underline-offset:2px; }
.footer-sito__copy a:hover { color:var(--text); }

.footer-sito a:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }


@media (max-width:520px) {
  .principale { padding:44px 0 40px; }
  .profilo__testa { flex-direction:column; align-items:flex-start; gap:16px; }
  .profilo__nome { font-size:24px; }
}

@media (prefers-reduced-motion:reduce) {
}