@font-face { font-family: Quicksand; font-weight: 500; font-display: swap; src: url(/assets/quicksand-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/assets/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/assets/inter-600.woff2) format("woff2"); }

:root {
  --teal: #1E887C;
  --teal-ink: #176B62;
  --teal-ink-hover: #1A7167;
  --azzurro: #32A1DB;
  --foglia: #64B563;
  --carta: #F4F8F7;
  --inchiostro: #0C1F2C;
  --tenue: #3C5260;
  --bordo: #D7E4E1;
  --bianco: #FFFFFF;
  --r-card: 18px;
  --r-button: 14px;
  --display: Quicksand, Inter, system-ui, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 16px 32px;
}

.testata { text-align: center; padding: 16px 0 40px; }

.logo { width: 220px; height: auto; }

h1, h2 { font-family: var(--display); font-weight: 500; line-height: 1.2; }

h1 { margin: 24px 0 16px; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }

h2 { margin: 0 0 12px; font-size: 1.375rem; }

.intro { max-width: 34em; margin: 0 auto; color: var(--tenue); }

.blocchi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.blocco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-top: 4px solid var(--foglia);
  border-radius: var(--r-card);
}

.blocco:nth-child(2) { border-top-color: var(--azzurro); }

.blocco h2, .blocco p { margin: 0; }

.blocco p { color: var(--tenue); flex: 1; }

.bottone {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--r-button);
  background: var(--teal-ink);
  color: var(--bianco);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bottone:hover { background: var(--teal-ink-hover); }

.telefono { color: var(--teal-ink); font-weight: 600; text-decoration: none; }

.telefono:hover { text-decoration: underline; }

a:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.cosa { max-width: 40em; margin: 40px auto 0; text-align: center; }

.cosa p { margin: 0; color: var(--tenue); }

.piede {
  padding: 24px 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--tenue);
  border-top: 1px solid var(--bordo);
}

.piede p { margin: 4px 0; }