.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--s6);
}

/* Colonna piu stretta dove si legge un testo lungo di seguito. */
.contenitore--lettura { max-width: 46rem; }

.sezione { padding-block: var(--s16); }
@media (min-width: 48rem) { .sezione { padding-block: var(--s24); } }

/* Dove due sezioni chiare si susseguono, il cambio di sfondo non c'e e
   le due si leggono come un blocco unico. Un filetto ridà il confine, e
   compare solo in quel caso: fra una sezione chiara e una scura il
   passaggio lo fa gia il colore. La linea sta larga quanto il contenuto,
   non quanto lo schermo, come tutti gli altri filetti della pagina. */
.sezione:not(.sezione--scura) + .sezione:not(.sezione--scura) { padding-top: 0; }
.sezione:not(.sezione--scura) + .sezione:not(.sezione--scura) > .contenitore {
  border-top: 1px solid var(--bordo);
  padding-top: var(--s16);
}
@media (min-width: 48rem) {
  .sezione:not(.sezione--scura) + .sezione:not(.sezione--scura) > .contenitore {
    padding-top: var(--s24);
  }
}

.sezione--scura {
  background: var(--scuro);
  color: var(--testo-chiaro);
}
.sezione--scura h2 { color: var(--panna); }

.sezione__occhiello {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bruno);
  margin-bottom: var(--s3);
}
.sezione--scura .sezione__occhiello { color: var(--oro-chiaro); }

.sezione__intro {
  max-width: 52ch;
  color: var(--testo-tenue);
}
.sezione--scura .sezione__intro { color: var(--testo-chiaro-tenue); }

/* Testata */
.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(28, 20, 16, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo-chiaro);
}
.testata__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
}
.testata__logo { display: block; }
.testata__logo img { width: 180px; }
.testata__azioni { display: flex; align-items: center; gap: var(--s4); }

/* Due etichette alternative invece di una spezzata: dentro un flex
   container i nodi di testo diventano item a se e lo spazio fra loro
   non e piu quello del testo. Ne resta visibile una sola alla volta. */
.testata__cta--breve { display: none; }
.testata__telefono {
  color: var(--panna);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}
.testata__telefono:hover { text-decoration: underline; }

@media (max-width: 40rem) {
  .testata__telefono { display: none; }
  .testata__logo img { width: 148px; }
}

/* Su schermo stretto il testo intero manda il bottone a due righe
   e gli fa occupare mezza barra. */
@media (max-width: 26rem) {
  .testata__cta--breve { display: inline; }
  .testata__cta--lungo { display: none; }
  .testata__cta { padding-inline: var(--s4); }
}

/* Bottoni */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(143, 81, 31, .2);
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione);
}
.bottone--pieno {
  background: var(--bruno);
  color: var(--panna);
}
.bottone--pieno:hover { background: #7A441A; }
.bottone--vuoto {
  border-color: var(--bordo-chiaro);
  color: var(--panna);
  background: none;
}
.bottone--vuoto:hover { background: rgba(246, 241, 232, .1); }
.bottone--vuoto-scuro {
  border-color: var(--bordo);
  color: var(--bruno);
  background: none;
}
.bottone--vuoto-scuro:hover { background: var(--panna-2); }

/* Pie di pagina */
.pie {
  background: var(--scuro-2);
  color: var(--testo-chiaro-tenue);
  padding-block: var(--s12);
  /* Il pulsante WhatsApp e fisso nell'angolo in basso a destra, proprio
     dove finisce questa parte: senza spazio in fondo coprirebbe la firma. */
  padding-bottom: calc(var(--s12) + 3.5rem);
  font-size: .9rem;
}
.pie__interno { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .pie__interno { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s12); }
}
.pie a { color: var(--panna); }
.pie img { width: 200px; margin-bottom: var(--s4); }
.pie h3 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  margin-bottom: var(--s3);
}
.pie__legale {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s6) var(--s8);
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--bordo-chiaro);
  font-size: .82rem;
}

.pie__societa { margin: 0; flex: 0 1 auto; text-wrap: pretty; }

/* I link di servizio e la firma stanno incolonnati a destra: cosi la
   firma non compete con l'informativa, che deve restare la voce trovabile. */
.pie__servizio { text-align: left; flex: 0 1 auto; }
@media (min-width: 48rem) { .pie__servizio { text-align: right; } }

.pie__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin: 0 0 var(--s2);
}
@media (min-width: 48rem) { .pie__link { justify-content: flex-end; } }

.pie__firma {
  margin: 0;
  color: var(--testo-chiaro-tenue);
  opacity: .7;
  font-size: .78rem;
}
.pie__firma a { color: var(--testo-chiaro-tenue); }
.pie__firma a:hover { color: var(--oro-chiaro); }