section { padding: clamp(80px, 12vw, 160px) var(--margine); }

.sezione-testa {
  max-width: var(--larghezza);
  margin: 0 auto clamp(40px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 32px;
}
.sezione-testa p {
  font-family: var(--titoli);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  color: var(--inchiostro-tenue);
}

/* Famiglia */
.famiglia {
  padding-top: clamp(40px, 7vw, 88px);
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.famiglia-testo {
  font-family: var(--titoli);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.18;
  text-wrap: balance;
}
.famiglia-testo em { color: var(--oro); }
.famiglia-seguito {
  max-width: 34em;
  margin: clamp(24px, 4vw, 40px) auto 0;
  color: var(--inchiostro-tenue);
  text-wrap: pretty;
  --ritardo: .15s;
}

/* Voci con disegno a tratto */
.voci {
  max-width: var(--larghezza);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(40px, 5vw, 72px);
}
.voce:nth-child(2) { --ritardo: .12s; }
.voce:nth-child(3) { --ritardo: .24s; }

.voce h3 { margin: 20px 0 10px; }
.voce p { color: var(--inchiostro-tenue); max-width: 30ch; }

.disegno {
  width: 120px;
  height: 80px;
  overflow: visible;
}
.disegno path, .disegno ellipse, .disegno circle {
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js .disegno :is(path, ellipse, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--curva);
  transition-delay: calc(var(--ritardo, 0s) + .3s);
}
.js .visibile .disegno :is(path, ellipse, circle) { stroke-dashoffset: 0; }

.negozio { border-top: 1px solid var(--linea); max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .js .disegno :is(path, ellipse, circle) { stroke-dashoffset: 0; transition: none; }
}