/*
 * "Cosa c'è dentro": le quattro colonne delle voci.
 *
 * Su desktop sono quattro elenchi affiancati, ognuno col titolo e una riga per
 * voce, divisi da un filo. Da tablet in giù le colonne non ci stanno e leggerle
 * una di seguito all'altra vorrebbe dire scorrere più di trenta righe: allora
 * diventano quattro gruppi che si aprono uno alla volta (disclosure vera, con
 * aria-expanded e aria-controls), col primo già aperto.
 *
 * Lo Shadow DOM non eredita i default del browser: la radice rifà box-sizing e
 * il reset di bottoni, liste e paragrafi.
 */
.k95Yj2oVIpVx0Vs5KKEt {
  box-sizing: border-box;
  font-family: var(--hu-font-body);
  color: var(--hu-color-foreground);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.k95Yj2oVIpVx0Vs5KKEt *,
.k95Yj2oVIpVx0Vs5KKEt *::before,
.k95Yj2oVIpVx0Vs5KKEt *::after { box-sizing: border-box; }
.k95Yj2oVIpVx0Vs5KKEt :where(p, ul, li) { margin: 0; padding: 0; }
.k95Yj2oVIpVx0Vs5KKEt :where(ul) { list-style: none; }
.k95Yj2oVIpVx0Vs5KKEt :where(button) { font: inherit; cursor: pointer; background: none; border: none; padding: 0; margin: 0; color: inherit; text-align: left; }
.k95Yj2oVIpVx0Vs5KKEt :where(svg) { display: block; }
.k95Yj2oVIpVx0Vs5KKEt :focus-visible { outline: 2px solid var(--hu-color-primary); outline-offset: 3px; border-radius: 3px; }

.VkEocMuAfLYZmFJcCWDg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
}
.HfOHXgkzFPtFRNFd76dW { min-width: 0; }

/* titolo di colonna: 20 / 24, tracking -3%, primary */
.dfmzmxMPq6xPoN3GSPdI {
  display: block; width: 100%;
  font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--hu-color-primary);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hu-color-border-default);
}

/* voce: 14 / 49, tracking -3%. L'interlinea è l'altezza della riga. */
.Lf0mP1S7ChKuBL9hDMwl {
  font-size: 14px; line-height: 49px; font-weight: 400; letter-spacing: -0.03em;
  color: var(--hu-color-text-muted);
  border-bottom: 1px solid var(--hu-color-border-default);
}

/* la voce in arrivo porta la sua etichetta, come il "più scelto" della tabella dei piani */
.Oz1QEIeKptCWwobvnSoy {
  display: inline-block; font-size: 10px; line-height: 140%; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500;
  color: var(--hu-color-primary); background: var(--hu-color-accent-soft);
  border-radius: var(--hu-radius-6); padding: 2px 6px; margin-left: 8px; vertical-align: 1px;
}

/* il chevron che apre e chiude: si vede da tablet in giù, e da aperto punta in alto */
.ML2DMwyuYd717ET5SZuK {
  display: none; margin-left: auto; color: var(--hu-color-primary); flex: 0 0 auto;
  transition: transform var(--hu-duration-state) var(--hu-ease-out-expo);
}
.HfOHXgkzFPtFRNFd76dW[data-open] .ML2DMwyuYd717ET5SZuK { transform: rotate(180deg); }
.Gca8zt19Ii6bydDO0w61 { display: block; }

/* 991 è la soglia `medium` di Webflow: l'elenco a fisarmonica parte già da
   tablet, dove quattro colonne sarebbero illeggibili. */
@media (max-width: 991px) {
  /* nessun filo sopra il primo gruppo: i fili stanno solo sotto */
  .VkEocMuAfLYZmFJcCWDg { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dfmzmxMPq6xPoN3GSPdI {
    display: flex; align-items: center; gap: 12px;
    padding-top: 14px;
    transition: color var(--hu-duration-fast) var(--hu-ease-out-expo);
  }
  .ML2DMwyuYd717ET5SZuK { display: block; }
  /* l'elenco si apre da 0fr a 1fr: l'altezza si anima senza misurarla in JS */
  .Gca8zt19Ii6bydDO0w61 {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--hu-duration-state) var(--hu-ease-out-expo);
  }
  .Gca8zt19Ii6bydDO0w61 > ul { overflow: hidden; min-height: 0; }
  .HfOHXgkzFPtFRNFd76dW[data-open] > .Gca8zt19Ii6bydDO0w61 { grid-template-rows: 1fr; }
}

/* sul telefono (767 è la soglia `small` di Webflow): titoli 16 / 16, come le domande del Faq */
@media (max-width: 767px) {
  .dfmzmxMPq6xPoN3GSPdI { font-size: 16px; line-height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ML2DMwyuYd717ET5SZuK, .Gca8zt19Ii6bydDO0w61, .dfmzmxMPq6xPoN3GSPdI { transition: none; }
}

