/* Portale Iscrizioni — sito di presentazione.
   Un solo colore di marchio (--marca) su nero, crema e due pastelli; pillole, card arrotondate, occhielli. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --nero: #1a171b;
  --nero-2: #2a262b;
  --bianco: #fff;
  --crema: #f6f3ec;
  /* Colore del marchio: cambiando --marca si adeguano da sole le tre tinte derivate */
  --marca: #d91a2a;
  --marca-scura: color-mix(in srgb, var(--marca) 78%, black); /* testi piccoli su fondo rosa */
  --marca-chiara: color-mix(in srgb, var(--marca) 76%, white); /* testi e icone su fondo nero */
  --marca-tenue: color-mix(in srgb, var(--marca) 13%, white); /* fondo rosa */
  --lilla: #c9c2e6;
  --giallo: #f2ee6b;
  --grigio: #6b666c;
  --grigio-chiaro: #e7e3dc;
  --testo-su-scuro: #d9d5da;
  --testo-su-pastello: #3b3640;

  --font-sans: "Inter Tight", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-1: clamp(2.5rem, 5.6vw, 5.25rem);
  --t-2: clamp(2rem, 3.8vw, 3.5rem);
  --t-3: clamp(1.375rem, 2vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --t-base: 1.0625rem;
  --t-piccolo: 0.875rem;
  --t-occhiello: 0.75rem;

  --contenitore: 1320px;
  --margine: clamp(1rem, 4vw, 2.5rem);
  --sezione: clamp(4.5rem, 10vw, 9rem);
  --raggio: 28px;
  --raggio-piccolo: 16px;
  --pillola: 999px;
  --ombra: 0 1px 2px #1a171b0f, 0 12px 32px #1a171b14;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Colore della società nelle schermate di esempio: lo cambia la prova della sezione "Su misura" */
  --societa: var(--marca);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--nero);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
p,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
svg {
  display: block;
}
.icona {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
:focus-visible {
  outline: 3px solid var(--nero);
  outline-offset: 3px;
  border-radius: 6px;
}
.sezione--nero :focus-visible,
.card--nero :focus-visible,
.area--famiglie :focus-visible,
.piede :focus-visible {
  outline-color: var(--marca-chiara);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--nero);
  color: var(--bianco);
  border-radius: 12px;
}
.salta:focus {
  top: 1rem;
}

.contenitore {
  width: 100%;
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.sezione {
  padding-block: var(--sezione);
}
.sezione--nero {
  background: var(--nero);
  color: var(--bianco);
}
.sezione--crema {
  background: var(--crema);
}
.sezione--rosa {
  background: var(--marca-tenue);
}

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.occhiello::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.occhiello--marca {
  color: var(--marca);
}
.titolo-1 {
  font-size: var(--t-1);
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}
.titolo-2 {
  font-size: var(--t-2);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.titolo-3 {
  font-size: var(--t-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--grigio);
}
.sezione--nero .lead,
.card--nero .lead {
  color: var(--testo-su-scuro);
}
.serif-corsivo {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.testa {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.testa .serif-corsivo {
  color: var(--marca);
  font-size: 1.06em;
}
.testa .lead {
  max-width: 40rem;
  margin-top: 0.5rem;
}

.pillola {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--pillola);
  background: var(--nero);
  color: var(--bianco);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--curva), background-color 0.25s, color 0.25s;
}
.pillola:hover {
  transform: translateY(-2px);
}
.pillola .icona {
  transition: transform 0.25s var(--curva);
}
.pillola:hover .icona {
  transform: translate(3px);
}
.pillola--chiara {
  background: var(--bianco);
  color: var(--nero);
}
.pillola--marca {
  background: var(--marca);
  color: var(--bianco);
}
.pillola .punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--marca-chiara);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio);
}
.card--nero {
  background: var(--nero);
  color: var(--bianco);
}

.spunta {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--bianco);
}
.spunta .icona {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}
.spunta--scura {
  background: var(--nero);
  color: var(--giallo);
}

/* Comparsa allo scorrimento (solo con JavaScript) */
.js .rivela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}
.js .rivela.visibile {
  opacity: 1;
  transform: none;
}

/* ---------- Navigazione ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffffe6;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scorsa {
  border-bottom-color: var(--grigio-chiaro);
}
.nav__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.marchio__punto {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--marca);
}
.marchio .serif-corsivo {
  color: var(--marca);
  font-size: 1.14em;
  letter-spacing: -0.02em;
}
.piede .marchio .serif-corsivo {
  color: var(--marca-chiara);
}
.nav__menu {
  margin-left: auto;
}
.nav__voci {
  display: flex;
  gap: 0.15rem;
}
.nav__link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--pillola);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover {
  background: #1a171b0f;
}
.nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--nero);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.nav__linee,
.nav__linee::before,
.nav__linee::after {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--nero);
  transition: transform 0.25s var(--curva);
}
.nav__linee {
  position: relative;
}
.nav__linee::before,
.nav__linee::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__linee::before {
  top: -6px;
}
.nav__linee::after {
  top: 6px;
}
.nav__hamburger[aria-expanded="true"] .nav__linee {
  background: transparent;
}
.nav__hamburger[aria-expanded="true"] .nav__linee::before {
  transform: translateY(6px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__linee::after {
  transform: translateY(-6px) rotate(-45deg);
}
.nav__pannello {
  padding-block: 0.5rem 1.5rem;
  border-top: 1px solid var(--grigio-chiaro);
}
.nav__pannello[hidden] {
  display: none;
}
.nav__pannello li a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--grigio-chiaro);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}
.nav__pannello .pillola {
  margin-top: 1.25rem;
}
@media (width <= 1100px) {
  .nav__menu,
  .nav__cta {
    display: none;
  }
  .nav__hamburger {
    display: block;
  }
  /* Senza JavaScript il pannello non si apre: resta il link alla richiesta */
  html:not(.js) .nav__hamburger {
    display: none;
  }
  html:not(.js) .nav__cta {
    display: inline-flex;
    margin-left: auto;
  }
}
/* ---------- Eroe ---------- */

.eroe {
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
}
.eroe__testa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.eroe__titolo {
  font-size: clamp(2.85rem, 7.6vw, 7.9rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.eroe__titolo .serif-corsivo {
  padding-right: 0.04em;
  color: var(--marca);
  font-size: 1.08em;
  letter-spacing: -0.02em;
}
.eroe__lato {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 0.6rem;
}
.eroe__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.eroe__cta {
  gap: 1rem;
  padding: 0.45rem 0.45rem 0.45rem 1.4rem;
  font-size: 1rem;
}
.eroe__tondo {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--bianco);
  color: var(--nero);
}
.eroe__secondario {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.5rem;
  font-weight: 600;
  text-decoration: underline 1px;
  text-underline-offset: 0.3em;
}
.eroe__secondario:hover {
  text-decoration-thickness: 2px;
}
.eroe__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
@media (width <= 1023px) {
  .eroe__testa {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .eroe__lato {
    max-width: 36rem;
    padding-bottom: 0;
  }
}
@media (width <= 767px) {
  .eroe__card {
    grid-template-columns: 1fr;
  }
}

/* Le due card dell'eroe */
.area {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  border-radius: var(--raggio);
}
.area--famiglie {
  background: var(--nero);
  color: var(--bianco);
}
.area--segreteria {
  background: var(--lilla);
  color: var(--nero);
}
.area__testa {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
}
.area__etichetta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid;
  border-radius: var(--pillola);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.area__etichetta::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--marca-chiara);
}
.area--segreteria .area__etichetta::before {
  background: var(--nero);
}
.area__titolo {
  margin-top: 0.35rem;
  font-size: var(--t-2);
  letter-spacing: -0.04em;
  line-height: 1;
}
.area__testo {
  color: var(--testo-su-scuro);
  font-size: 1.05rem;
}
.area--segreteria .area__testo {
  color: var(--testo-su-pastello);
}
.area__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 21rem;
  padding: 3.5rem 1.25rem;
  border-radius: 18px;
  overflow: hidden;
}
.area--famiglie .area__media {
  background: radial-gradient(120% 90% at 20% 0%, #3d3740 0%, var(--nero-2) 60%);
  outline: 1px solid #ffffff14;
  outline-offset: -1px;
}
.area--segreteria .area__media {
  background: #b9b1dc;
}
.area__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--pillola);
  background: var(--bianco);
  color: var(--nero);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 6px 20px #1a171b2e;
}
.area__chip--alto {
  top: 1rem;
  left: 1rem;
}
.area__chip--basso {
  right: 1rem;
  bottom: 1rem;
}
.area--famiglie .area__chip--basso {
  background: var(--lilla);
}
.area--segreteria .area__chip--basso {
  background: var(--giallo);
}
.area__chip .spunta {
  background: var(--marca);
  color: var(--bianco);
}
.area__puntino {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}
.area__voci {
  display: grid;
  margin-top: auto;
}
.area__voci li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-top: 1px solid #ffffff24;
  font-weight: 500;
  line-height: 1.3;
}
.area--segreteria .area__voci li {
  border-top-color: #1a171b29;
}
.area__voci .icona {
  width: 20px;
  height: 20px;
  color: var(--marca-chiara);
}
.area--segreteria .area__voci .icona {
  color: var(--nero);
}
.area__tutte {
  align-self: flex-start;
}
@supports (grid-template-rows: subgrid) {
  @media (width >= 768px) {
    .eroe__card {
      grid-template-rows: repeat(4, auto);
    }
    .area {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-content: start;
      row-gap: 1.25rem;
    }
    .area__voci {
      align-self: start;
      margin-top: 0;
    }
    .area__tutte {
      place-self: end start;
    }
  }
}
@media (width <= 560px) {
  .area__chip {
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
  }
  .area__chip--alto {
    top: 0.65rem;
    left: 0.65rem;
  }
  .area__chip--basso {
    right: 0.65rem;
    bottom: 0.65rem;
  }
}

/* ---------- Schermate di esempio del portale ---------- */

.finta {
  width: min(100%, 21rem);
  border-radius: 20px;
  background: var(--bianco);
  color: #0f172a;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 24px 60px #0000004d;
  overflow: hidden;
}
.finta--larga {
  width: min(100%, 30rem);
}
.finta__barra {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
}
.finta__stemma {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--societa);
  color: var(--bianco);
  font-size: 0.7rem;
  font-weight: 700;
  transition: background-color 0.3s;
}
.finta__campanella {
  position: relative;
  margin-left: auto;
  color: #475569;
}
.finta__campanella::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--bianco);
  border-radius: 50%;
  background: var(--societa);
  transition: background-color 0.3s;
}
.finta__menu {
  display: flex;
  gap: 1rem;
  padding: 0 0.9rem;
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.finta__menu span {
  padding: 0.55rem 0;
  border-bottom: 2px solid transparent;
}
.finta__menu .attiva {
  border-bottom-color: var(--societa);
  color: var(--societa);
  transition: color 0.3s, border-color 0.3s;
}
.finta__corpo {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  background: #f8fafc;
}
.finta__scheda {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: var(--bianco);
}
.finta__titolo {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
}
.finta__categoria {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.finta__riga {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #475569;
}
.finta__riga .icona {
  width: 0.95rem;
  height: 0.95rem;
}
.finta__prezzo {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
  font-weight: 600;
}
.finta__prezzo small {
  display: block;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 400;
}
.finta__prezzo div:last-child {
  text-align: right;
  white-space: nowrap;
}
.finta__bottone {
  padding: 0.6rem;
  border-radius: 9px;
  background: var(--societa);
  color: var(--bianco);
  font-weight: 700;
  text-align: center;
  transition: background-color 0.3s;
}
.finta__tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.finta__tabella th {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.finta__tabella td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.finta__tabella tr:last-child td {
  border-bottom: 0;
}
.finta__tabella td:first-child {
  font-weight: 600;
}
.finta__tabella small {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 400;
}
.finta__tabella .destra {
  text-align: right;
  white-space: nowrap;
}
.stato {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--pillola);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.stato--ok {
  background: #d1fae5;
  color: #065f46;
}
.stato--attesa {
  background: #fef3c7;
  color: #92400e;
}
.stato--online {
  background: #dbeafe;
  color: #1e40af;
}
@media (width <= 560px) {
  .finta__tabella .nascondi-stretto {
    display: none;
  }
}

/* ---------- Numeri ---------- */

.numeri {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.numeri__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--grigio-chiaro);
  border-bottom: 1px solid var(--grigio-chiaro);
}
.numeri__lista li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}
.numeri__lista li + li {
  border-left: 1px solid var(--grigio-chiaro);
}
.numeri__lista li:first-child {
  padding-left: 0;
}
.numeri__valore {
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.numeri__valore .serif-corsivo {
  font-size: 1.1em;
  line-height: 0.8;
  letter-spacing: -0.01em;
}
.numeri__etichetta {
  max-width: 17em;
  color: var(--grigio);
  font-size: 0.95rem;
  line-height: 1.4;
}
@media (width <= 1023px) {
  .numeri__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .numeri__lista li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .numeri__lista li:nth-child(n + 3) {
    border-top: 1px solid var(--grigio-chiaro);
  }
}
@media (width <= 480px) {
  .numeri__lista {
    grid-template-columns: 1fr;
  }
  .numeri__lista li,
  .numeri__lista li:nth-child(3) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.1rem 0;
    border-left: 0;
  }
  .numeri__lista li + li {
    border-top: 1px solid var(--grigio-chiaro);
    border-left: 0;
  }
  .numeri__etichetta {
    max-width: 12em;
    text-align: right;
  }
}

/* ---------- Testo scorrevole ---------- */

.scorrevole {
  position: relative;
  overflow: hidden;
}
.scorrevole__binario {
  display: flex;
  width: max-content;
}
.js .scorrevole__binario {
  animation: scorri var(--durata, 40s) linear infinite;
}
.scorrevole.ferma .scorrevole__binario {
  animation-play-state: paused;
}
.scorrevole__gruppo {
  display: flex;
  align-items: center;
  flex: none;
}
@keyframes scorri {
  to {
    transform: translateX(-50%);
  }
}
.scorrevole__pausa {
  position: absolute;
  right: var(--margine);
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.7;
}
.scorrevole__pausa:hover {
  opacity: 1;
}
.scorrevole__pausa .icona {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}
.scorrevole__pausa .icona--play,
.scorrevole.ferma .scorrevole__pausa .icona--pausa {
  display: none;
}
.scorrevole.ferma .scorrevole__pausa .icona--play {
  display: block;
}
html:not(.js) .scorrevole__pausa {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .scorrevole__binario {
    animation: none;
  }
  .scorrevole__pausa {
    display: none;
  }
  .js .rivela {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.stella {
  display: grid;
  place-items: center;
  padding-inline: 0.35em;
}
.stella svg {
  width: 0.6em;
  height: 0.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* ---------- Selettore dei ruoli ---------- */

.selettore__testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.selettore__testa .occhiello {
  margin-bottom: 1rem;
  color: var(--marca-scura);
}
.selettore__testa .serif-corsivo {
  font-size: 1.06em;
}
.selettore__pillole {
  display: inline-flex;
  padding: 0.3rem;
  border-radius: var(--pillola);
  background: #1a171b14;
}
.selettore__pillola {
  min-width: 7.5rem;
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: var(--pillola);
  background: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.selettore__pillola:hover {
  background: #1a171b14;
}
.selettore__pillola[aria-selected="true"] {
  background: var(--nero);
  color: var(--bianco);
}
html:not(.js) .selettore__pillole {
  display: none;
}
.selettore__scheda {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.js .selettore__scheda:not(.attiva) {
  display: none;
}
html:not(.js) .selettore__scheda + .selettore__scheda {
  margin-top: 4rem;
}
.selettore__testo {
  display: grid;
  justify-items: start;
  gap: 1.4rem;
}
.selettore__descrizione {
  color: var(--testo-su-pastello);
  font-size: var(--t-lead);
  line-height: 1.5;
}
.selettore__punti {
  display: grid;
  gap: 0.7rem;
}
.selettore__punti li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 500;
}
.selettore__spunta {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--nero);
  color: var(--marca-tenue);
}
.selettore__spunta .icona {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.schermo {
  padding: clamp(0.75rem, 2vw, 1.5rem);
}
.schermo__griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}
.schermo__nota {
  margin-top: 0.9rem;
  color: var(--testo-su-scuro);
  font-size: var(--t-occhiello);
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}
.ui {
  min-width: 0;
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  border-radius: var(--raggio-piccolo);
}
.ui--largo {
  grid-column: 1 / -1;
}
.ui--scuro {
  background: var(--nero-2);
  color: var(--bianco);
}
.ui--giallo {
  background: var(--giallo);
  color: var(--nero);
}
.ui--lilla {
  background: var(--lilla);
  color: var(--nero);
}
.ui__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.ui__codice {
  padding: 0.25rem 0.6rem;
  border-radius: var(--pillola);
  background: #ffffff14;
  color: var(--testo-su-scuro);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
}
.ui__etichetta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ui__cifra {
  margin-block: 0.35rem 0.75rem;
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}
.ui__cifra--testo {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.ui__nota {
  margin-top: 0.6rem;
  color: var(--testo-su-pastello);
  font-size: 0.78rem;
}
.ui__esito {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.tab {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
}
.tab th {
  padding: 0 0.5rem 0.45rem 0;
  color: #a9a3aa;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.tab td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-top: 1px solid #ffffff14;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab .destra {
  padding-right: 0;
  text-align: right;
}
/* Nel riepilogo del prezzo la voce va a capo invece di essere troncata */
.tab--conto {
  table-layout: auto;
}
.tab--conto td:first-child {
  white-space: normal;
}
.tab .tenue {
  color: var(--testo-su-scuro);
}
.tab .meno {
  color: var(--giallo);
}
.tab .totale td {
  padding-top: 0.7rem;
  border-top-color: #ffffff4d;
  font-size: 1rem;
  font-weight: 700;
}
.tab__tipo {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: #c9c2e629;
  color: var(--lilla);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tab__tipo--ok {
  background: #22c55e33;
  color: #86efac;
}
.tab__tipo--giallo {
  background: #f2ee6b2e;
  color: var(--giallo);
}
.tab__caselle {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}
.tab__caselle i {
  width: 14px;
  height: 14px;
  border: 1.5px solid #ffffff59;
  border-radius: 4px;
}
.tab__caselle i.presente {
  border-color: var(--bianco);
  background: var(--bianco);
}
.barre {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 48px;
}
.barre span {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: #1a171b38;
}
.barre span:last-child {
  background: var(--nero);
}
.misure {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}
.misure li {
  display: grid;
  grid-template-columns: minmax(0, 6.2rem) 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.misure__nome {
  font-weight: 600;
}
.misure__barra {
  height: 8px;
  border-radius: 99px;
  background: #1a171b24;
  overflow: hidden;
}
.misure__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--nero);
}
.misure__valore {
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
.controlli {
  display: grid;
  gap: 0.4rem;
}
.controlli li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.avvisi {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.avvisi li {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: #ffffff8c;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.avvisi small {
  color: var(--testo-su-pastello);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (width <= 1023px) {
  .selettore__scheda {
    grid-template-columns: 1fr;
  }
}
@media (width <= 560px) {
  .selettore__pillole {
    width: 100%;
  }
  .selettore__pillola {
    flex: 1;
    min-width: 0;
    padding-inline: 0.5rem;
    font-size: 0.92rem;
  }
  .schermo__griglia {
    grid-template-columns: 1fr;
  }
  .tab .nascondi-stretto {
    display: none;
  }
}

/* ---------- Funzioni ---------- */

.funzioni__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.funzioni__griglia > li {
  display: grid;
}
/* Ogni card è un link alla pagina della funzione */
.funzione {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 17rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--raggio);
  background: var(--crema);
  color: var(--nero);
  text-decoration: none;
  transition: transform 0.3s var(--curva), box-shadow 0.3s;
}
.funzione:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra);
}
.funzione__vai {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.funzione__vai .icona {
  transition: transform 0.25s var(--curva);
}
.funzione:hover .funzione__vai .icona {
  transform: translate(3px);
}
.funzione--rosa {
  background: var(--marca-tenue);
}
.funzione--lilla {
  background: var(--lilla);
}
.funzione--giallo {
  background: var(--giallo);
}
.funzione--nero {
  background: var(--nero);
  color: var(--bianco);
}
.funzione__icona {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: var(--nero);
  color: var(--bianco);
}
.funzione--nero .funzione__icona {
  background: var(--marca);
  color: var(--bianco);
}
.funzione__icona .icona {
  width: 1.35rem;
  height: 1.35rem;
}
.funzione__titolo {
  font-size: var(--t-3);
}
.funzione__testo {
  color: var(--testo-su-pastello);
}
.funzione--nero .funzione__testo {
  color: var(--testo-su-scuro);
}
@media (width <= 1023px) {
  .funzioni__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 620px) {
  .funzioni__griglia {
    grid-template-columns: 1fr;
  }
  .funzione {
    min-height: 0;
  }
  .funzione__icona {
    margin-bottom: 0.5rem;
  }
}

/* ---------- Nastro ---------- */

.nastro {
  background: var(--marca);
  color: var(--bianco);
  overflow-x: clip;
}
.nastro .scorrevole {
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem) 3rem;
}
.nastro__voce {
  padding-inline: 0.3em;
  font-size: clamp(1.75rem, 3.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nastro__voce--serif {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.1vw, 4rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}
.nastro .stella {
  font-size: clamp(1.75rem, 3.6vw, 3.5rem);
}

/* ---------- Su misura ---------- */

.misura__griglia {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.misura__palco {
  display: grid;
  place-items: center;
  min-height: 30rem;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--raggio);
  background: var(--lilla);
  overflow: hidden;
}
.misura__testo {
  display: grid;
  justify-items: start;
  gap: 1.4rem;
}
.misura__testo .serif-corsivo {
  color: var(--marca);
  font-size: 1.06em;
}
.misura__prova {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem;
  border-radius: var(--raggio-piccolo);
  background: var(--crema);
}
.misura__gruppo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0;
  margin: 0;
  border: 0;
}
.misura__gruppo legend {
  float: left;
  min-width: 8.5rem;
  padding: 0;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
}
.misura__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.misura__colore {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 3px solid var(--crema);
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  box-shadow: 0 0 0 1px #1a171b33;
  transition: transform 0.2s var(--curva);
}
.misura__colore:hover {
  transform: scale(1.08);
}
.misura__colore[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--nero);
}
.misura__parola {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--nero);
  border-radius: var(--pillola);
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.misura__parola[aria-pressed="true"] {
  background: var(--nero);
  color: var(--bianco);
}
html:not(.js) .misura__prova {
  display: none;
}
.finta__indirizzo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: #f1f5f9;
  color: #475569;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.finta__indirizzo .icona {
  width: 0.8rem;
  height: 0.8rem;
}
.finta__elenco {
  display: grid;
  gap: 0.5rem;
}
.finta__persona {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: var(--bianco);
}
.finta__persona b {
  display: block;
  font-size: 0.9rem;
}
.finta__persona small {
  color: #64748b;
  font-size: 0.75rem;
}
.finta__iniziali {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--societa) 14%, white);
  color: var(--societa);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background-color 0.3s, color 0.3s;
}
.finta__persona .stato {
  margin-left: auto;
}
.finta__intestazione {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}
.finta__intestazione .finta__bottone {
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
}
@media (width <= 1023px) {
  .misura__griglia {
    grid-template-columns: 1fr;
  }
  .misura__palco {
    min-height: 0;
    order: 2;
  }
}

/* ---------- Sicurezza ---------- */

.sicurezza__griglia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.sicurezza__testa {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.sicurezza__testa .serif-corsivo {
  color: var(--marca);
  font-size: 1.06em;
}
.sicurezza__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.sicurezza__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid #1a171b29;
}
.sicurezza__lista .icona {
  grid-row: span 2;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  color: var(--marca);
}
.sicurezza__lista h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.sicurezza__lista p {
  color: var(--testo-su-pastello);
  font-size: 0.98rem;
  line-height: 1.5;
}
@media (width <= 1023px) {
  .sicurezza__griglia {
    grid-template-columns: 1fr;
  }
}
@media (width <= 620px) {
  .sicurezza__lista {
    grid-template-columns: 1fr;
  }
}

/* ---------- Come si parte ---------- */

.metodo__passi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.passo {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 15rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--raggio);
}
.passo--crema {
  background: var(--crema);
}
.passo--rosa {
  background: var(--marca-tenue);
}
.passo--lilla {
  background: var(--lilla);
}
.passo--giallo {
  background: var(--giallo);
}
.passo__numero {
  margin-bottom: auto;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-style: italic;
  line-height: 1;
}
.passo__titolo {
  margin-top: 2.5rem;
  font-size: var(--t-3);
}
.passo__testo {
  color: var(--testo-su-pastello);
}
@media (width <= 1023px) {
  .metodo__passi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 560px) {
  .metodo__passi {
    grid-template-columns: 1fr;
  }
  .passo {
    min-height: 0;
  }
  .passo__titolo {
    margin-top: 1rem;
  }
}

/* ---------- Domande ---------- */

.domande {
  padding-top: 0;
}
.domande__griglia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.domande__testa {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.domande__testa .serif-corsivo {
  color: var(--marca);
  font-size: 1.06em;
}
.domanda {
  border-top: 1px solid var(--grigio-chiaro);
}
.domanda:last-child {
  border-bottom: 1px solid var(--grigio-chiaro);
}
.domanda summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.35rem;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.domanda summary::-webkit-details-marker {
  display: none;
}
.domanda summary::after {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--crema)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a171b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E")
    center / 1rem no-repeat;
  transition: transform 0.3s var(--curva), background-color 0.3s;
}
.domanda[open] summary::after {
  background-color: var(--giallo);
  transform: rotate(45deg);
}
.domanda p {
  max-width: 42rem;
  padding-bottom: 1.5rem;
  color: var(--testo-su-pastello);
}
@media (width <= 1023px) {
  .domande__griglia {
    grid-template-columns: 1fr;
  }
}

/* ---------- Richiesta di demo ---------- */

.richiesta {
  padding-top: 0;
}
.richiesta__card {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.75rem, 5vw, 4.5rem);
}
.richiesta__testo {
  display: grid;
  align-content: start;
  gap: 1.25rem;
}
.richiesta__testo .occhiello {
  color: var(--marca-chiara);
}
.richiesta__contatti {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}
.richiesta__contatti li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--testo-su-scuro);
}
.richiesta__contatti .icona {
  margin-top: 0.2rem;
  color: var(--marca-chiara);
}
.richiesta__contatti a {
  color: var(--bianco);
}
.richiesta__modulo {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--raggio-piccolo);
  background: var(--bianco);
  color: var(--nero);
}
.richiesta__modulo form {
  display: grid;
  gap: 1rem;
}
.richiesta__riga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.richiesta__modulo label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.richiesta__modulo label small {
  color: var(--grigio);
  font-weight: 400;
}
.richiesta__modulo input,
.richiesta__modulo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--grigio);
  border-radius: 12px;
  background: var(--crema);
  font-size: 1rem;
  font-weight: 400;
}
.richiesta__modulo input::placeholder,
.richiesta__modulo textarea::placeholder {
  color: var(--grigio);
  opacity: 1;
}
.richiesta__modulo input:focus,
.richiesta__modulo textarea:focus {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  background: var(--bianco);
}
.richiesta__modulo textarea {
  min-height: 120px;
  resize: vertical;
}
.richiesta__modulo .pillola {
  justify-self: start;
}
.richiesta__nota {
  color: var(--grigio);
  font-size: var(--t-piccolo);
}
.richiesta__esito {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--crema);
  color: var(--nero);
}
.richiesta__esito:empty {
  display: none;
}
@media (width <= 900px) {
  .richiesta__card {
    grid-template-columns: 1fr;
  }
}
@media (width <= 560px) {
  .richiesta__riga {
    grid-template-columns: 1fr;
  }
}

/* ---------- Piede ---------- */

.piede {
  padding-block: var(--sezione) 2.5rem;
}
.piede__alto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid #ffffff1f;
}
.piede__claim {
  max-width: 13em;
}
.piede__claim .serif-corsivo {
  color: var(--marca-chiara);
}
.piede__colonne {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-block: 3rem;
}
.piede__titolo {
  margin-bottom: 1rem;
  font-weight: 600;
}
.piede__lista li {
  margin: 0.4rem 0;
}
.piede__lista a {
  color: var(--testo-su-scuro);
  font-size: 0.95rem;
  text-decoration: none;
}
.piede__lista a:hover {
  color: var(--bianco);
  text-decoration: underline;
}
.piede__basso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid #ffffff1f;
  color: var(--testo-su-scuro);
  font-size: var(--t-piccolo);
}
.piede__basso a {
  color: inherit;
}
@media (width <= 900px) {
  .piede__colonne {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width <= 560px) {
  .piede__colonne {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pagine delle funzioni ---------- */
/* Stessa ossatura delle guide del portale: copertina, "In breve", passi numerati, note. */

.briciole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  color: var(--grigio);
  font-size: var(--t-piccolo);
}
.briciole a {
  color: inherit;
  text-underline-offset: 0.2em;
}
.briciole a:hover {
  color: var(--nero);
}
.briciole [aria-current] {
  color: var(--nero);
  font-weight: 600;
}

.guida__copertina {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
}
.guida__titolo {
  max-width: 62rem;
  margin-block: 1.1rem 1.5rem;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.guida__titolo .serif-corsivo {
  padding-right: 0.04em;
  color: var(--marca);
  font-size: 1.07em;
  letter-spacing: -0.02em;
}
.guida__sommario {
  max-width: 44rem;
}
.guida__chi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.guida__chi-etichetta {
  margin-right: 0.35rem;
  color: var(--grigio);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Chi agisce: lo stesso colore nella copertina e in ogni passo */
.chi {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.75rem;
  border-radius: var(--pillola);
  background: var(--crema);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.chi--segreteria {
  background: var(--marca-tenue);
  color: var(--marca-scura);
}
.chi--famiglia {
  background: var(--lilla);
}
.chi--responsabile {
  background: var(--giallo);
}
.chi--portale {
  background: var(--nero);
  color: var(--bianco);
}

.guida__sezione {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.guida__h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--t-2);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.guida__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--marca);
  color: var(--bianco);
  font-size: 1.25rem;
  letter-spacing: 0;
}

.breve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.breve li {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1.35rem 1.5rem 1.6rem;
  border-top: 4px solid var(--marca);
  border-radius: var(--raggio-piccolo);
  background: var(--crema);
}
.breve b {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.breve span {
  color: var(--testo-su-pastello);
  font-size: 0.98rem;
  line-height: 1.5;
}

.guida__corpo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}
.guida__esempio {
  position: sticky;
  top: 96px;
}
.passi-guida {
  display: grid;
  counter-reset: passo;
}
.passi-guida > li {
  position: relative;
  padding: 0 0 2.25rem 4.5rem;
  counter-increment: passo;
}
.passi-guida > li:last-child {
  padding-bottom: 0;
}
.passi-guida > li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: -0.35rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--marca-tenue);
  color: var(--marca-scura);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1;
}
.passi-guida > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.2rem;
  bottom: 0.3rem;
  left: 1.6rem;
  width: 1.5px;
  background: var(--grigio-chiaro);
}
.passi-guida__chi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.passi-guida h3 {
  margin-block: 0.65rem 0.4rem;
  font-size: var(--t-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.passi-guida p {
  max-width: 36rem;
  color: var(--testo-su-pastello);
}

.note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.note li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius: var(--raggio);
  background: var(--crema);
}
.note li:nth-child(4n + 1) {
  background: var(--lilla);
}
.note li:nth-child(4n + 2) {
  background: var(--giallo);
}
.note li:nth-child(4n + 3) {
  background: var(--marca-tenue);
}
.note b {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.note span {
  color: var(--testo-su-pastello);
  line-height: 1.5;
}

.altre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.altre a {
  display: grid;
  gap: 0.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s var(--curva);
}
.altre a:hover {
  border-color: var(--nero);
  transform: translateY(-2px);
}
.altre small {
  color: var(--grigio);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.altre b {
  font-size: var(--t-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.altre__dopo {
  text-align: right;
}

.invito {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.invito__testo {
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}
.invito__testo .serif-corsivo {
  color: var(--marca-chiara);
  font-size: 1.06em;
}
.invito__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.invito__azioni .eroe__secondario {
  color: var(--bianco);
}
.guida__fine {
  padding-bottom: var(--sezione);
}

@media (width <= 1023px) {
  .guida__corpo {
    grid-template-columns: 1fr;
  }
  .guida__esempio {
    position: static;
  }
}
@media (width <= 560px) {
  .passi-guida > li {
    padding-left: 3.6rem;
  }
  .passi-guida > li::before {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.3rem;
  }
  .passi-guida > li:not(:last-child)::after {
    top: 2.6rem;
    left: 1.3rem;
  }
  .altre {
    grid-template-columns: 1fr;
  }
  .altre__dopo {
    text-align: left;
  }
}

/* Schermate vere del portale, nella sezione "Nel portale" delle pagine delle funzioni */
.guida__premessa {
  margin-top: calc(clamp(1.5rem, 3vw, 2.25rem) * -0.6);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--grigio);
}
.schermate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.schermata {
  display: grid;
  gap: 0.9rem;
  width: min(100%, var(--larga, 100%));
  min-width: 0;
  margin: 0;
}
.schermata__cornice {
  border: 1px solid var(--grigio-chiaro);
  border-radius: 16px;
  background: var(--bianco);
  box-shadow: var(--ombra);
  overflow: hidden;
}
.schermata__apri {
  display: block;
  cursor: zoom-in;
}
.schermata img {
  display: block;
  width: 100%;
  height: auto;
}
/* Pagina intera: una finta barra del browser sopra l'immagine */
.schermata__barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--grigio-chiaro);
  background: var(--crema);
}
.schermata__barra i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d5d0c6;
}
.schermata__barra span {
  margin-left: 0.6rem;
  padding: 0.2rem 0.8rem;
  border-radius: var(--pillola);
  background: var(--bianco);
  color: var(--grigio);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Schermata da telefono: il bordo scuro fa da cornice */
.schermata--telefono .schermata__cornice {
  border: 7px solid var(--nero);
  border-radius: 30px;
}
.schermata figcaption {
  max-width: 44rem;
  color: var(--testo-su-pastello);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ---------- Introduzione illustrata (home) ---------- */
/* Sei card con un disegno animato per ogni difficoltà del "fai da te", poi la card della risposta. */

.intro {
  padding-block: clamp(0.5rem, 2vw, 2rem) var(--sezione);
}
.intro__testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.intro__testa > div {
  display: grid;
  gap: 1rem;
  max-width: 54rem;
}
.intro__testa .serif-corsivo {
  color: var(--marca);
  font-size: 1.06em;
}
.intro__testa .lead {
  max-width: 42rem;
  margin-top: 0.5rem;
}
.intro__pausa {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--nero);
  border-radius: var(--pillola);
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.intro__pausa:hover {
  background: #1a171b0f;
}
.intro__pausa .icona {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor;
  stroke: none;
}
.intro__pausa .icona--play,
.intro.ferma .intro__pausa .icona--pausa {
  display: none;
}
.intro.ferma .intro__pausa .icona--play {
  display: block;
}
html:not(.js) .intro__pausa {
  display: none;
}

.intro__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.intro__griglia > li {
  display: grid;
}
.problema {
  display: flex;
  flex-direction: column;
  border-radius: var(--raggio);
  background: var(--crema);
  color: var(--nero);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s var(--curva), box-shadow 0.3s;
}
.problema:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra);
}
.problema--lilla {
  background: var(--lilla);
}
.problema--giallo {
  background: var(--giallo);
}
.problema--rosa {
  background: var(--marca-tenue);
}
.problema--nero {
  background: var(--nero);
  color: var(--bianco);
}
.problema__figura {
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) 0;
}
.problema__testo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
}
.problema h3 {
  font-size: var(--t-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.problema p {
  color: var(--testo-su-pastello);
}
.problema--nero p {
  color: var(--testo-su-scuro);
}
.problema__vai {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.problema__vai .icona {
  transition: transform 0.25s var(--curva);
}
.problema:hover .problema__vai .icona {
  transform: translate(3px);
}

.soluzione {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.soluzione__testo {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}
.soluzione .occhiello,
.soluzione .serif-corsivo {
  color: var(--marca-chiara);
}
.soluzione .serif-corsivo {
  font-size: 1.06em;
}
@media (width <= 1023px) {
  .intro__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .soluzione {
    grid-template-columns: 1fr;
  }
}
@media (width <= 620px) {
  .intro__griglia {
    grid-template-columns: 1fr;
  }
}

/* I disegni: forme piatte nei colori del sito. Le classi "an-" sono le parti che si muovono. */
.disegno {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
  overflow: visible;
}
.disegno .c-nero {
  fill: var(--nero);
}
.disegno .c-bianco {
  fill: var(--bianco);
}
.disegno .c-crema {
  fill: var(--crema);
}
.disegno .c-lilla {
  fill: var(--lilla);
}
.disegno .c-giallo {
  fill: var(--giallo);
}
.disegno .c-marca {
  fill: var(--marca);
}
.disegno .c-rosa {
  fill: var(--marca-tenue);
}
.disegno .c-grigio {
  fill: var(--grigio-chiaro);
}
.disegno .bordo {
  stroke: var(--nero);
  stroke-width: 2.5;
}
.disegno .bordo--fine {
  stroke-width: 2;
}
.disegno .tratto {
  fill: none;
  stroke: var(--nero);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.disegno .tratto--bianco {
  stroke: var(--bianco);
}
.disegno .tratto--marca {
  stroke: var(--marca);
}
.disegno .tratto--grigio {
  stroke: #b9b6b0;
}
.disegno .tratto--grosso {
  stroke-width: 6;
}
.disegno .casella {
  fill: var(--bianco);
  stroke: var(--nero);
  stroke-width: 2;
}
.disegno .filtro-spento {
  fill: none;
  stroke: var(--nero);
  stroke-width: 1.5;
}
.disegno__segno {
  fill: var(--bianco);
  font-size: 20px;
  font-weight: 700;
}
.disegno__euro {
  fill: var(--giallo);
  font-size: 20px;
  font-weight: 700;
}
.disegno__euro--piccolo {
  font-size: 14px;
}
.disegno__etichetta,
.an-etichetta {
  fill: var(--nero);
  font-size: 13px;
  font-weight: 600;
}
.disegno__icona {
  fill: none;
  stroke: var(--bianco);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le parti animate ruotano e si ingrandiscono attorno al proprio centro */
.disegno [class*="an-"] {
  transform-box: fill-box;
  transform-origin: center;
}
/* Ferme con il pulsante, quando la sezione non è a schermo e per chi ha chiesto meno movimento */
.intro.ferma [class*="an-"],
.intro.fuori [class*="an-"] {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .disegno [class*="an-"] {
    animation: none !important;
  }
  .intro__pausa {
    display: none;
  }
}
/* Senza animazione ogni disegno resta nel suo momento più chiaro: è lo stato scritto in ogni regola. */

/* 1. Tessera: la validità si esaurisce, i giorni scendono, compare l'avviso */
.an-validita {
  transform: scaleX(0.12);
  animation: an-validita 6s linear infinite;
}
.disegno .an-validita {
  transform-origin: left center;
}
@keyframes an-validita {
  0% {
    transform: scaleX(1);
  }
  58%,
  92% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
.an-giorni {
  fill: var(--nero);
  font-size: 24px;
  font-weight: 700;
  animation: 6s step-end infinite;
}
.an-giorni--1 {
  opacity: 0;
  animation-name: an-giorni-1;
}
.an-giorni--2 {
  opacity: 0;
  animation-name: an-giorni-2;
}
.an-giorni--3 {
  animation-name: an-giorni-3;
}
@keyframes an-giorni-1 {
  0% {
    opacity: 1;
  }
  26%,
  100% {
    opacity: 0;
  }
}
@keyframes an-giorni-2 {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}
@keyframes an-giorni-3 {
  0% {
    opacity: 0;
  }
  56%,
  100% {
    opacity: 1;
  }
}
.an-avviso {
  animation: an-compare-tardi 6s var(--curva) infinite;
}
@keyframes an-compare-tardi {
  0%,
  56% {
    transform: scale(0);
  }
  62% {
    transform: scale(1.2);
  }
  66%,
  93% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* 2. Certificati: i fogli cadono nella cartella, il terzo scivola via */
.an-foglio {
  animation: 7s var(--curva) infinite;
}
.an-foglio--1 {
  animation-name: an-foglio-1;
}
.an-foglio--2 {
  animation-name: an-foglio-2;
}
.an-foglio--3 {
  animation-name: an-foglio-3;
}
@keyframes an-foglio-1 {
  0% {
    opacity: 0;
    transform: translateY(-36px);
  }
  8%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes an-foglio-2 {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-36px);
  }
  16%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes an-foglio-3 {
  0%,
  16% {
    opacity: 0;
    transform: translateY(-36px);
  }
  24%,
  50% {
    opacity: 1;
    transform: none;
  }
  70%,
  100% {
    opacity: 0;
    transform: translate(44px, -40px) rotate(28deg);
  }
}
.an-dubbio {
  animation: an-dubbio 7s var(--curva) infinite;
}
.an-dubbio--tardi {
  animation-duration: 6s;
  animation-name: an-compare-tardi;
}
@keyframes an-dubbio {
  0%,
  70% {
    transform: scale(0);
  }
  76% {
    transform: scale(1.2);
  }
  80%,
  94% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* 3. Quote: le spunte si disegnano una alla volta, una riga resta in dubbio */
.an-spunta {
  stroke-dasharray: 13;
  animation: 6s ease infinite;
}
.an-spunta--1 {
  animation-name: an-spunta-1;
}
.an-spunta--2 {
  animation-name: an-spunta-2;
}
.an-spunta--3 {
  animation-name: an-spunta-3;
}
@keyframes an-spunta-1 {
  0%,
  8% {
    stroke-dashoffset: 13;
  }
  16%,
  94% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 13;
  }
}
@keyframes an-spunta-2 {
  0%,
  22% {
    stroke-dashoffset: 13;
  }
  30%,
  94% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 13;
  }
}
@keyframes an-spunta-3 {
  0%,
  52% {
    stroke-dashoffset: 13;
  }
  60%,
  94% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 13;
  }
}
.an-evidenzia {
  animation: an-evidenzia 6s ease infinite;
}
@keyframes an-evidenzia {
  0%,
  34% {
    opacity: 0;
  }
  40%,
  52% {
    opacity: 1;
  }
  58% {
    opacity: 0.35;
  }
  64%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.an-incerto {
  fill: var(--marca);
  font-size: 13px;
  font-weight: 700;
  animation: an-incerto 6s ease infinite;
}
@keyframes an-incerto {
  0%,
  36% {
    opacity: 0;
  }
  42%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.an-moneta {
  animation: an-moneta 1.8s ease-in-out infinite;
}
.an-moneta--2 {
  animation-delay: -0.7s;
}
@keyframes an-moneta {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-8px);
  }
}

/* 4. Registro: le righe si scambiano di posto, una viene cancellata, la matita si muove */
.an-riga {
  animation: 6s var(--curva) infinite;
}
.an-riga--1 {
  animation-name: an-riga-giu-presto;
}
.an-riga--3 {
  animation-name: an-riga-su-presto;
}
.an-riga--2 {
  animation-name: an-riga-giu-tardi;
}
.an-riga--4 {
  animation-name: an-riga-su-tardi;
}
@keyframes an-riga-giu-presto {
  0%,
  14% {
    transform: none;
  }
  28%,
  86% {
    transform: translateY(44px);
  }
  100% {
    transform: none;
  }
}
@keyframes an-riga-su-presto {
  0%,
  14% {
    transform: none;
  }
  28%,
  86% {
    transform: translateY(-44px);
  }
  100% {
    transform: none;
  }
}
@keyframes an-riga-giu-tardi {
  0%,
  48% {
    transform: none;
  }
  62%,
  86% {
    transform: translateY(44px);
  }
  100% {
    transform: none;
  }
}
@keyframes an-riga-su-tardi {
  0%,
  48% {
    transform: none;
  }
  62%,
  86% {
    transform: translateY(-44px);
  }
  100% {
    transform: none;
  }
}
.an-cancella {
  stroke-dasharray: 62;
  animation: an-cancella 6s ease infinite;
}
@keyframes an-cancella {
  0%,
  30% {
    stroke-dashoffset: 62;
  }
  40%,
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 62;
  }
}
.an-matita {
  animation: an-matita 1.4s ease-in-out infinite;
}
@keyframes an-matita {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translate(-3px, 3px) rotate(-7deg);
  }
}

/* 5. Messaggi: partono uno dopo l'altro, solo il primo risulta letto */
.an-nuvola {
  animation: 6s var(--curva) infinite;
}
.an-nuvola--1 {
  animation-name: an-nuvola-1;
}
.an-nuvola--2 {
  animation-name: an-nuvola-2;
}
.an-nuvola--3 {
  animation-name: an-nuvola-3;
}
@keyframes an-nuvola-1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  8%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes an-nuvola-2 {
  0%,
  14% {
    opacity: 0;
    transform: translateY(10px);
  }
  22%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes an-nuvola-3 {
  0%,
  28% {
    opacity: 0;
    transform: translateY(10px);
  }
  36%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.disegno .an-letto {
  stroke: var(--nero);
  animation: an-letto 6s step-end infinite;
}
@keyframes an-letto {
  0% {
    stroke: #b9b6b0;
  }
  46%,
  100% {
    stroke: var(--nero);
  }
}

/* 6. Faldone: il lucchetto si sgancia e i fogli volano via */
.an-arco {
  transform: rotate(24deg);
  animation: an-arco 6s var(--curva) infinite;
}
.disegno .an-arco {
  transform-origin: 100% 100%;
}
@keyframes an-arco {
  0%,
  8% {
    transform: none;
  }
  20%,
  92% {
    transform: rotate(24deg);
  }
  100% {
    transform: none;
  }
}
.an-volo {
  animation: 6s ease-in infinite;
}
.an-volo--1 {
  transform: translate(20px, -14px) rotate(10deg);
  animation-name: an-volo-1;
}
.an-volo--2 {
  animation-name: an-volo-2;
}
@keyframes an-volo-1 {
  0%,
  24% {
    opacity: 1;
    transform: none;
  }
  64%,
  92% {
    opacity: 0;
    transform: translate(66px, -48px) rotate(26deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes an-volo-2 {
  0%,
  44% {
    opacity: 1;
    transform: none;
  }
  84%,
  92% {
    opacity: 0;
    transform: translate(58px, -62px) rotate(-20deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* La risposta: due filtri si accendono, l'elenco si restringe, il conteggio scende */
.an-filtro {
  fill: var(--nero);
  animation: 8s step-end infinite;
}
.an-filtro--1 {
  animation-name: an-filtro-1;
}
.an-filtro--2 {
  animation-name: an-filtro-2;
}
.an-etichetta--1,
.an-etichetta--2 {
  fill: var(--bianco);
  animation: 8s step-end infinite;
}
.an-etichetta--1 {
  animation-name: an-etichetta-1;
}
.an-etichetta--2 {
  animation-name: an-etichetta-2;
}
@keyframes an-filtro-1 {
  0% {
    fill: var(--crema);
  }
  14%,
  100% {
    fill: var(--nero);
  }
}
@keyframes an-etichetta-1 {
  0% {
    fill: var(--nero);
  }
  14%,
  100% {
    fill: var(--bianco);
  }
}
@keyframes an-filtro-2 {
  0% {
    fill: var(--crema);
  }
  42%,
  100% {
    fill: var(--nero);
  }
}
@keyframes an-etichetta-2 {
  0% {
    fill: var(--nero);
  }
  42%,
  100% {
    fill: var(--bianco);
  }
}
.an-fuori {
  opacity: 0.16;
  animation: 8s ease infinite;
}
.an-fuori--a {
  animation-name: an-fuori-a;
}
.an-fuori--b {
  animation-name: an-fuori-b;
}
@keyframes an-fuori-a {
  0%,
  14% {
    opacity: 1;
  }
  20%,
  95% {
    opacity: 0.16;
  }
  100% {
    opacity: 1;
  }
}
@keyframes an-fuori-b {
  0%,
  42% {
    opacity: 1;
  }
  48%,
  95% {
    opacity: 0.16;
  }
  100% {
    opacity: 1;
  }
}
.an-conta {
  fill: var(--nero);
  font-size: 14px;
  font-weight: 600;
  animation: 8s step-end infinite;
}
.an-conta--1 {
  opacity: 0;
  animation-name: an-conta-1;
}
.an-conta--2 {
  opacity: 0;
  animation-name: an-conta-2;
}
.an-conta--3 {
  animation-name: an-conta-3;
}
@keyframes an-conta-1 {
  0% {
    opacity: 1;
  }
  14%,
  100% {
    opacity: 0;
  }
}
@keyframes an-conta-2 {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  42%,
  100% {
    opacity: 0;
  }
}
@keyframes an-conta-3 {
  0% {
    opacity: 0;
  }
  42%,
  100% {
    opacity: 1;
  }
}
.an-anello {
  opacity: 0;
  animation: an-anello 2.6s ease-out infinite;
}
@keyframes an-anello {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}