/* Home nuova, dalla sezione 5 in giù (21/10/2026): le sezioni del sito di oggi, stessi contenuti e stesso ordine, rifatte
   con i gesti della hero B (giallo, notte, rosso, blu, ombre piene, Space Grotesk + Inter). */
.hm { position: relative; overflow: clip; }
.hm-giro { width: 100%; max-width: 1440px; margin: 0 auto; padding-block: clamp(64px, 8vw, 112px); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: grid; gap: clamp(32px, 4vw, 56px); }
.hm h2 { margin: 0; font-family: var(--titolo); font-weight: 700; letter-spacing: -.035em; line-height: .95; font-size: clamp(42px, 5.6vw, 88px); text-wrap: balance; }
.hm h3 { margin: 0; font-family: var(--titolo); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.hm p { margin: 0; }
.hm .lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; max-width: 36em; font-weight: 500; }
.hm .lead b { font-weight: 600; }
.hm-testa { display: grid; gap: 18px; justify-items: start; }
.hm-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titolo); font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 999px; background: var(--giallo); color: var(--notte); }
.hm .btn.primo { background: var(--rosso); color: var(--bianco); box-shadow: 0 6px 0 var(--notte); }
.hm .btn.primo:hover { box-shadow: 0 8px 0 var(--notte); }
.hm .btn.giallo { background: var(--giallo); color: var(--notte); box-shadow: 0 6px 0 var(--notte); }
.hm .btn.contorno { background: transparent; color: currentColor; box-shadow: inset 0 0 0 3px currentColor; }
.hm-azioni { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
/* Strisce di foto: in fila sul computer, scorrono col dito sul telefono */
.hm-fila { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.hm-fila img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; }
@media (max-width: 900px) {
  .hm-fila { grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
  .hm-fila::-webkit-scrollbar { display: none; }
  .hm-fila li { scroll-snap-align: start; }
  .hm .btn { font-size: 16px; padding: 16px 22px; }
}
@media (prefers-reduced-motion: reduce) { .hm *, .hm *::before, .hm *::after { transition: none !important; animation: none !important; } }