/*
 * I quattro passaggi e la scena.
 *
 * Dal tablet in su (finestra da 761 px): i passaggi in riga, numerati, sotto un filo continuo; ogni passaggio ha un
 * bordo superiore trasparente tirato sopra il filo con un margine negativo, e quello del passaggio scelto si
 * accende. Sotto, la scena larga quanto la pagina; in fondo lo slot. Le quattro descrizioni si leggono tutte.
 *
 * Fino a 760 px: niente schede. Numero, titolo, due righe, e subito sotto la sua scena; poi il passaggio dopo.
 *
 * Le misure sono quelle del pacchetto del sito (prepara.mjs, «I quattro passaggi»). I numeri e il titolo acceso
 * usano il viola da testo del tema (--hv-accent-text di custom-code/hv-tema.css), che in scuro è più chiaro del
 * viola pieno; dove il foglio del tema non c'è vale il viola del sito.
 *
 * Lo Shadow DOM non eredita i default del browser: la radice rifà box-sizing e il reset di bottoni e paragrafi.
 */
.fKGee_gMPPyyonnu8Sco {
  box-sizing: border-box;
  font-family: var(--hu-font-body);
  color: var(--hu-color-foreground);
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fKGee_gMPPyyonnu8Sco *,
.fKGee_gMPPyyonnu8Sco *::before,
.fKGee_gMPPyyonnu8Sco *::after { box-sizing: border-box; }
:where(.fKGee_gMPPyyonnu8Sco) :where(p, figure, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(.fKGee_gMPPyyonnu8Sco) :where(b, strong) { font-weight: 500; }
:where(.fKGee_gMPPyyonnu8Sco) :where(button) { font: inherit; cursor: pointer; background: none; border: none; padding: 0; margin: 0; color: inherit; text-align: left; }
:where(.fKGee_gMPPyyonnu8Sco) :where(svg) { display: block; }
.fKGee_gMPPyyonnu8Sco :focus-visible { outline: 2px solid var(--hu-color-primary); outline-offset: 3px; border-radius: 3px; }

.un6uk9XtS7iyClzFG8iM { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
/* la colonna non fa da scatola: passaggi, scena e slot sono tre righe della stessa griglia */
.GdOm9Y9cGShBVCaRqfry { display: contents; }

/*
 * Le quattro celle: lo stesso riquadro di "Le schermate" (PlatformScreens.module.css). Un riquadro unico con bordo
 * e raggio, quattro celle divise da una linea verticale; la cella scelta si accende per intero e porta il filetto
 * in alto, che durante l'avanzamento automatico fa da binario alla barra del tempo. Niente numeri.
 * Grandezza e peso dei testi sono quelli dei passaggi (22/26 e 14/1.45), uguali nei due componenti.
 */
.FHVjISUgFp7Nna4r8Vjh {
  order: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; min-width: 0;
  background: var(--hu-color-white);
  border: 1px solid var(--hu-color-border-default);
  border-radius: var(--hu-radius-16);
  overflow: hidden;
}
/* un bottone centra il suo contenuto in altezza: in colonna e dall'alto, così i quattro testi partono allineati */
.Fv5iiRG9D9yIjFcBdBMK {
  display: flex; flex-direction: column; justify-content: flex-start; width: 100%; position: relative;
  padding: 18px 20px 20px;
  border-left: 1px solid var(--hu-color-border-input);
  transition: background-color var(--hu-duration-fast) var(--hu-ease-out-expo);
}
.Fv5iiRG9D9yIjFcBdBMK:first-child { border-left-color: transparent; }
.Fv5iiRG9D9yIjFcBdBMK::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px;
  border-radius: 2px; background: var(--hu-color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--hu-duration-state) var(--hu-ease-out-expo);
}
.Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"]::before { transform: scaleX(1); }
/* mentre l'avanzamento automatico scorre il filetto fa da binario: a riempirlo è la barra */
.Fv5iiRG9D9yIjFcBdBMK[data-auto][aria-selected="true"]::before { background: var(--hu-color-accent-soft); }
.CqhU8I4bAbY1nbW8MqMB {
  position: absolute; left: 16px; right: 16px; top: 0; height: 2px;
  border-radius: 2px; background: var(--hu-color-primary);
  transform-origin: left; pointer-events: none; display: block;
  animation: ZaZCVeCd02hb4hWilZ8Y var(--ex-t, 8000ms) linear both;
}
.CqhU8I4bAbY1nbW8MqMB[data-paused] { animation-play-state: paused; }
@keyframes ZaZCVeCd02hb4hWilZ8Y { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.Fv5iiRG9D9yIjFcBdBMK:hover { background: var(--hu-color-secondary); }
.Fv5iiRG9D9yIjFcBdBMK:focus-visible { outline-offset: -3px; }

/* titolo: 22 / 26, tracking -4% */
.g3LGaJ71cgt1vAsWUOMv {
  display: block; font-size: 22px; line-height: 26px; font-weight: 500; letter-spacing: -0.04em;
  color: var(--hu-color-text-muted);
  transition: color var(--hu-duration-state) var(--hu-ease-out-expo);
}
/* la descrizione: 14 / 1.45, tracking -3%. Nel riquadro largo è sempre aperta. */
.CzcId6iib15sOJyplYIE { display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 9px; }
.CzcId6iib15sOJyplYIE > span { overflow: hidden; min-height: 0; display: block; }
.aA4jOIR1OPyjpp6Z9_rM {
  display: block; font-size: 14px; line-height: 1.45; letter-spacing: -0.03em; color: var(--hu-color-text-muted);
  transition: color var(--hu-duration-state) var(--hu-ease-out-expo);
}

/* la cella scelta */
.Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"], .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"]:hover { background: var(--hv-accent-soft, var(--hu-color-accent-faint)); }
.Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"] .g3LGaJ71cgt1vAsWUOMv { color: var(--hv-accent-text, var(--hu-color-primary)); }
.Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"] .aA4jOIR1OPyjpp6Z9_rM { color: var(--hu-color-foreground); }

.lZGkZse3KU92AyHUO7Sv { order: 2; min-width: 0; }
.tqK1aK9RkkGg6sOCfurz { min-width: 0; }
.tqK1aK9RkkGg6sOCfurz[hidden] { display: none !important; }
.tqK1aK9RkkGg6sOCfurz:focus-visible { outline-offset: 6px; border-radius: var(--hu-radius-20); }

/* Il palco: la cornice delle composizioni (.comp di product.module.css: bordo, raggio, fondo sfumato, ombra), senza
   aria dentro: la scena lo riempie. `figure.stage` e non `.stage`: .comp è di un altro modulo, con la stessa
   specificità, e l'ordine dei due fogli nel bundle non è garantito. */
figure.BSfZ4fRXAGvIeEgQZB5Z {
  display: block; padding: 0; height: clamp(460px, 46vw, 640px);
  transition: background-color 280ms ease, border-color 280ms ease;
}

/* lo slot, sotto la scena */
.vuEuYAlLr5gJnUQWHsbh { order: 3; margin: -4px 0 0; }
.vuEuYAlLr5gJnUQWHsbh:empty { display: none; }

/* il cambio di scena è una dissolvenza breve: a muoversi sono i pezzi dentro la scena, non il riquadro */
@media (prefers-reduced-motion: no-preference) {
  .tqK1aK9RkkGg6sOCfurz:not([hidden]) { animation: IvtveL2InAeHcJdmUS21 var(--hu-duration-state) var(--hu-ease-out-expo); }
}
@keyframes IvtveL2InAeHcJdmUS21 { from { opacity: 0; } to { opacity: 1; } }

/* Fino a 900 px le quattro celle vanno in colonna e la descrizione resta solo sulla cella scelta, come in
   "Le schermate". */
@media (max-width: 900px) and (min-width: 761px) {
  .FHVjISUgFp7Nna4r8Vjh { display: block; }
  .Fv5iiRG9D9yIjFcBdBMK { padding: 16px 18px 18px 20px; border-left: none; border-top: 1px solid var(--hu-color-border-input); }
  .Fv5iiRG9D9yIjFcBdBMK:first-child { border-top-color: transparent; }
  .Fv5iiRG9D9yIjFcBdBMK::before, .CqhU8I4bAbY1nbW8MqMB { left: 0; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .Fv5iiRG9D9yIjFcBdBMK::before { transform: scaleY(0); transform-origin: top; }
  .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"]::before { transform: scaleY(1); }
  .CqhU8I4bAbY1nbW8MqMB { transform-origin: top; animation-name: NtmzXU6VgT22RmpTa4vo; }
  .CzcId6iib15sOJyplYIE { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
  .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"] .CzcId6iib15sOJyplYIE { grid-template-rows: 1fr; opacity: 1; margin-top: 9px; }
}
@keyframes NtmzXU6VgT22RmpTa4vo { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 760px) {
  .un6uk9XtS7iyClzFG8iM { gap: 0; }
  .FHVjISUgFp7Nna4r8Vjh, .lZGkZse3KU92AyHUO7Sv { display: contents; }
  .Fv5iiRG9D9yIjFcBdBMK, .Fv5iiRG9D9yIjFcBdBMK:first-child, .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"], .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"]:hover { display: block; margin: 0; padding: 0 0 18px; border: 0; background: none; pointer-events: none; }
  .Fv5iiRG9D9yIjFcBdBMK:not(:first-of-type) { margin-top: 48px; }
  .Fv5iiRG9D9yIjFcBdBMK::before { content: none; }
  .CqhU8I4bAbY1nbW8MqMB { display: none; }
  .g3LGaJ71cgt1vAsWUOMv, .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"] .g3LGaJ71cgt1vAsWUOMv { font-size: 24px; line-height: 28px; color: var(--hu-color-foreground); }
  .aA4jOIR1OPyjpp6Z9_rM, .Fv5iiRG9D9yIjFcBdBMK[aria-selected="true"] .aA4jOIR1OPyjpp6Z9_rM { font-size: 16px; line-height: 130%; color: var(--hu-color-text-muted); }
  .tqK1aK9RkkGg6sOCfurz { animation: none !important; }
  .Fv5iiRG9D9yIjFcBdBMK:nth-of-type(1) { order: 1; } .Fv5iiRG9D9yIjFcBdBMK:nth-of-type(2) { order: 3; } .Fv5iiRG9D9yIjFcBdBMK:nth-of-type(3) { order: 5; } .Fv5iiRG9D9yIjFcBdBMK:nth-of-type(4) { order: 7; }
  .tqK1aK9RkkGg6sOCfurz:nth-of-type(1) { order: 2; } .tqK1aK9RkkGg6sOCfurz:nth-of-type(2) { order: 4; } .tqK1aK9RkkGg6sOCfurz:nth-of-type(3) { order: 6; } .tqK1aK9RkkGg6sOCfurz:nth-of-type(4) { order: 8; }
  .vuEuYAlLr5gJnUQWHsbh { order: 9; margin: 32px 0 0; }
  figure.BSfZ4fRXAGvIeEgQZB5Z { height: 470px; border-radius: 16px; }
}