:root {
  --blu: #153457;
  --blu-2: #1F4570;
  --avorio: #F2EADA;
  --avorio-2: #F8F3E8;
  --sabbia: #E6D7BA;
  --oro: #D6B67E;
  --oro-testo: #9C7A45;
  --inchiostro: #1d1d1b;
  --grigio: #5f584d;
  --bianco: #ffffff;
  --morbido: cubic-bezier(.22,.8,.3,1);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { font-family: Literata, Georgia, serif; color: var(--inchiostro); background: var(--avorio-2); line-height: 1.6; font-size: 17px; overflow-x: hidden }
img { max-width: 100%; display: block }
a { color: var(--blu) }
.contenitore { max-width: 1080px; margin: 0 auto; padding: 0 16px }
.stretto { max-width: 720px }
.kick { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-testo) }
h1 { font-weight: 400; color: var(--blu); font-size: clamp(36px, 8vw, 56px); line-height: 1.08; margin: 6px 0 16px; letter-spacing: -.01em }
h2 { font-weight: 400; color: var(--blu); font-size: clamp(26px, 5.6vw, 36px); line-height: 1.18; margin: 6px 0 14px }
h3 { font-weight: 700; color: var(--blu); font-size: 19px; margin: 26px 0 6px }
p + p { margin-top: 12px }
section { padding: 60px 0 }
.vai { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #fff; background: var(--blu); text-decoration: none; padding: 15px 28px; border-radius: 999px; box-shadow: 0 8px 22px rgba(21,52,87,.25); transition: transform .3s var(--morbido), box-shadow .3s, background .3s }
.vai:hover { background: var(--blu-2); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21,52,87,.3) }
.nuvola { display: block; width: 64px; height: 26px; color: var(--oro); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; overflow: visible }

footer { padding: 26px 0 32px; font-size: 13.5px; color: var(--grigio); text-align: center; background: var(--avorio-2); border-top: 1px solid var(--sabbia) }
.piede { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px }
.piede > * { white-space: nowrap }

@media (min-width: 820px) {
  body { font-size: 18px }
  section { padding: 84px 0 }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}