:root {
  --attenuato: #56586F;
  --colore-scuro-2: #201F3A;
  --colore-scuro: #2B2A4C;
  --colore-vivo-tenue: #FBE4DF;
  --colore-vivo: #E05A47;
  --filo: #D6D6D6;
  --fondo-1: #F3F3F3;
  --fondo-2: #EBE8F5;
}

*, *::before, *::after {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
}
body {
  margin: 0px;
  color: #212529;
  font: 400 0.9375rem/1.5 "Nunito Sans", Arial, sans-serif;
  background: #FFF;
}
img {
  display: block;
  height: auto;
  max-width: 100%;
}
a {
  color: var(--colore-scuro);
}
h1, h2, h3, h4 {
  margin: 0px 0 1rem;
  color: var(--colore-scuro);
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.2;
}
h1 {
  font-size: 1.9375rem;
  font-weight: 400;
}
h2 {
  font-size: 1.5625rem;
  font-weight: 400;
}
h3 {
  font-size: 1.1875rem;
  font-weight: 700;
}
p {
  margin: 0px 0 1rem;
}
.vista-nascosta {
  position: absolute;
  height: 1px;
  overflow: hidden;
  width: 1px;
  clip: rect(0 0px 0px 0);
}
.cornice {
  margin: 0px auto;
  max-width: 1095px;
  padding: 0px 0.9375rem;
  width: 100%;
}
.riga {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -0.9375rem;
}
.riga > [class*="col"] {
  min-width: 0px;
  padding: 0px 0.9375rem;
  width: 100%;
}
.scritta-centro {
  text-align: center;
}
.blocco {
  padding: 2.5rem 0px;
}
.blocco--nebbia {
  background: var(--fondo-1);
}
.blocco--cielo {
  background: var(--fondo-2);
}
.occhiello {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* colori e misure di base */
.sito-testata {
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 30;
  height: 80px;
  padding-top: 10px;
}
.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding: 8px 8px 8px 18px;
  background: #FFF;
  border-radius: 14px;
  box-shadow: 0px 0 40px rgba(74, 98, 120, 0.2);
}
.barra__marchio img {
  height: auto;
  width: 170px;
}
.barra__voci {
  display: none;
}
.barra__voci a {
  display: inline-block;
  padding: 0.75rem 0px;
  color: var(--colore-scuro);
  font: 400 1rem/1.1 Manrope, Arial, sans-serif;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.15s ease-in-out;
}
.barra__voci a:hover {
  text-decoration-color: var(--colore-vivo);
}
.menu-vecchio {
  display: inline-block;
  position: relative;
}
.menu-vecchio-lista {
  display: none;
  left: -1rem;
  position: absolute;
  top: 100%;
  min-width: 260px;
  padding: 0.5rem 1rem;
  background: #FFF;
  border-radius: 14px;
  filter: drop-shadow(0 0.5rem 1.5rem rgba(74, 98, 120, 0.25));
}
.menu-vecchio-lista a {
  display: block;
  padding: 0.5rem 0px;
}
.menu-vecchio:hover .menu-vecchio-lista, .menu-vecchio:focus-within .menu-vecchio-lista {
  display: block;
}
.bottoncino-invito {
  margin-left: auto;
  padding: 10px 14px;
  color: var(--colore-scuro);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--colore-vivo-tenue);
  border-radius: 3px;
}
.panino {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  height: 44px;
  padding: 10px;
  width: 44px;
  background: none;
  border: 0px;
  cursor: pointer;
}
.panino i {
  display: block;
  height: 2px;
  background: var(--colore-scuro);
}
.menu-vecchio-lista-telefono {
  display: flex;
  inset: 0px;
  position: fixed;
  top: 80px;
  flex-direction: column;
  padding: 1.5rem;
  background: #F6F7F9;
  animation: scivola 0.4s cubic-bezier(.22,1,.36,1);
}
.menu-vecchio-lista-telefono[hidden] {
  display: none;
}
@keyframes scivola { from {
  transform: translateX(100%);
} to {
  transform: none;
} }
.menu-vecchio-lista-telefono a {
  padding: 0.875rem 0px;
  color: var(--colore-scuro);
  font: 700 1.25rem Manrope, Arial, sans-serif;
  text-decoration: none;
  border-bottom: 1px solid var(--filo);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline-offset: 2px;
  outline: 3px solid var(--colore-vivo);
}

/* tipografia */
.tasto {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 15px 20px;
  font: 700 0.9375rem/1 "Nunito Sans", Arial, sans-serif;
  text-decoration: none;
  border-radius: 3px;
  border: 0px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.tasto--scuro {
  color: #FFF;
  background: var(--colore-scuro);
}
.tasto--scuro::after {
  bottom: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
  height: 3px;
  background: var(--colore-vivo);
  content: "";
}
.tasto--scuro:hover {
  background: var(--colore-scuro-2);
}
.tasto--contorno {
  color: var(--colore-scuro);
  background: transparent;
  box-shadow: inset 0px 0px 0 2px var(--colore-scuro);
}
.tasto--contorno:hover {
  color: #FFF;
  background: var(--colore-scuro);
}
.tasto--intero {
  margin-top: auto;
  width: 100%;
}
.tasto--mini {
  padding: 10px 14px;
  font-size: 0.8125rem;
}
.tasto-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tasto[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* barra in alto */
.copertina {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.copertina__figura {
  height: 100%;
  width: 100vw;
  object-fit: cover;
}
.bollo-adesivo {
  bottom: 24px;
  display: flex;
  position: absolute;
  right: 6%;
  align-items: center;
  justify-content: center;
  height: 150px;
  width: 150px;
  color: #FFF;
  font: 700 1.125rem/1.2 Manrope, Arial, sans-serif;
  text-align: center;
  background: var(--colore-scuro);
  border-radius: 50%;
  box-shadow: 0px 0px 0px 4px #FFF, 0px 0px 0 7px var(--colore-vivo);
  transform: rotate(-8deg);
}

/* tendina sul telefono */
.pregi-nastro {
  border-bottom: 2px solid var(--filo);
}
.pregi-nastro__elenco {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0px;
  padding: 1.25rem 0px;
  font-weight: 700;
  list-style: none;
}
.pregi-nastro__elenco li::before {
  margin-right: 0.5rem;
  color: #6F7A00;
  content: "✓";
}

.avvio__sottotitolo {
  max-width: 1065px;
}

/* tasti */
.coppia {
  row-gap: 1rem;
}
.scheda-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0px 1.5rem 1.5rem;
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.scheda-box__figura {
  height: 200px;
  margin: 0px -1.5rem 1.25rem;
  max-width: none;
  width: calc(100% + 3rem);
  border-radius: 3px 3px 0 0px;
  object-fit: cover;
}
.scheda-box__nome {
  font-size: 1.375rem;
}
.scheda-box__riga {
  display: flex;
  gap: 14px;
  padding: 14px 0px;
  border-top: 1px solid var(--filo);
}
.scheda-box__riga svg {
  flex: none;
}
.scheda-box__riga b {
  display: block;
}
.scheda-box__riga:last-of-type {
  margin-bottom: 1.25rem;
}

/* copertina */
.volti {
  margin-top: 2rem;
  text-align: left;
  row-gap: 2rem;
}
.volti img {
  aspect-ratio: 59 / 86;
  margin-bottom: 1rem;
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}

/* nastro dei pregi */
.bollo-riga {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
.tondo {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  height: 160px;
  width: 160px;
  background: #FFF;
  border-radius: 50%;
  border: 2px solid var(--colore-scuro);
}
.tondo b {
  font: 700 1.125rem Manrope, Arial, sans-serif;
}
.tondo small {
  color: var(--attenuato);
}
.tondo--colmo {
  color: #FFF;
  background: var(--colore-scuro);
}
.tondo--colmo small {
  color: #DFE2E8;
}

/* apertura */
.scorri-blocco .cornice {
  position: relative;
}
.scorri-blocco .cornice::before {
  bottom: -2.5rem;
  left: 50%;
  position: absolute;
  z-index: -1;
  height: 50%;
  width: 100vw;
  background: var(--colore-vivo-tenue);
  transform: translateX(-50%);
  content: "";
}
.scorri-blocco {
  position: relative;
  z-index: 0;
}
.scorri-capo {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.frecce-vecchie {
  display: flex;
  gap: 8px;
}
.freccia-vecchia {
  height: 48px;
  width: 48px;
  color: #FFF;
  font-size: 1.5rem;
  background: var(--colore-scuro);
  border-radius: 3px;
  border: 0px;
  cursor: pointer;
}
.scorri-binario {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scorri-binario::-webkit-scrollbar {
  display: none;
}
.vetrino-box {
  flex: 0 0 85%;
  overflow: hidden;
  padding-bottom: 1rem;
  background: #F6F7F9;
  border-radius: 3px;
  scroll-snap-align: start;
}
.vetrino-box img {
  aspect-ratio: 9 / 5;
  margin-bottom: 1rem;
  width: 100%;
  object-fit: cover;
}
.vetrino-box h3, .vetrino-box p {
  padding: 0px 1rem;
}

/* schede gemelle */
.note {
  margin-top: 1.5rem;
  row-gap: 1rem;
}
.nota {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px !important;
  border-top: 3px solid var(--colore-scuro);
}
.nota b {
  color: var(--colore-scuro);
  font: 700 1.1875rem Manrope, Arial, sans-serif;
}
.nota--evidenza {
  border-top-color: var(--colore-vivo);
}

.h3-forte {
  font-size: 1.375rem;
  font-weight: 700;
}
.largo-figura {
  margin: 1.5rem auto 0px;
  max-width: 1245px;
  padding: 0px 0.9375rem;
}
.largo-figura img {
  aspect-ratio: 8 / 3;
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}

/* volti */
.freccia-collegamento {
  font-weight: 700;
  text-decoration: none;
}
.freccia-collegamento:hover {
  text-decoration: underline;
}
.procedura .riga {
  margin-top: 1rem;
  row-gap: 1rem;
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 20px 22px;
  border-radius: 3px;
  border: 1px solid #DDE1EA;
}

/* le quattro carte */
.linguette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.linguetta {
  min-height: 44px;
  padding: 10px 16px;
  color: var(--colore-scuro);
  font: 700 0.9375rem "Nunito Sans", Arial, sans-serif;
  background: #FFF;
  border-radius: 3px;
  border: 0px;
  box-shadow: inset 0px 0px 0 2px var(--colore-scuro);
  cursor: pointer;
}
.linguetta.stato-su {
  color: #FFF;
  background: var(--colore-scuro);
}
.linguetta-riquadro details {
  border-bottom: 1px solid var(--filo);
}
.linguetta-riquadro summary {
  position: relative;
  padding: 27px 40px 27px 0px;
  font: 700 1rem Manrope, Arial, sans-serif;
  cursor: pointer;
  list-style: none;
}
.linguetta-riquadro summary::-webkit-details-marker {
  display: none;
}
.linguetta-riquadro summary::after {
  position: absolute;
  right: 4px;
  top: 22px;
  font: 300 1.5rem Manrope, Arial, sans-serif;
  content: "+";
}
.linguetta-riquadro details[open] summary::after {
  content: "−";
}
.linguetta-riquadro details p {
  padding-bottom: 1rem;
}

/* date dei cicli */
.base-nastro {
  padding: 3rem 0 1.5rem;
  color: #FFF;
  background: var(--colore-scuro);
  border-top: 1px solid var(--attenuato);
}
.base-nastro .riga {
  row-gap: 2rem;
}
.base-nastro__titolo {
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  font: 700 1rem Manrope, Arial, sans-serif;
}
.base-nastro__titolo::after {
  bottom: 0px;
  left: 0px;
  position: absolute;
  height: 1px;
  width: 40%;
  background: var(--colore-vivo);
  content: "";
}
.base-nastro a, .base-nastro span {
  display: block;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
  color: #FFF;
  text-decoration: none;
}
.base-nastro a:hover {
  text-decoration: underline;
}
.base-nastro__diritti {
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--attenuato);
}
.collegamento-tasto {
  min-height: 24px;
  padding: 0px;
  color: #FFF;
  font: inherit;
  text-decoration: underline;
  background: none;
  border: 0px;
  cursor: pointer;
}

/* le mattine */
.avviso-spigolo {
  bottom: 1rem;
  left: 1rem;
  position: fixed;
  right: 1rem;
  z-index: 50;
  padding: 1.25rem;
  background: #FFF;
  border-radius: 14px;
  box-shadow: 0px 0 40px rgba(74, 98, 120, 0.3);
}
.avviso-spigolo[hidden] {
  display: none;
}
.avviso-spigolo__spunta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.75rem;
}
.avviso-spigolo__tasti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 36rem) {
    .vetrino-box {
  flex-basis: 48%;
}
    .avviso-spigolo {
  left: auto;
  max-width: 420px;
}
}
@media (min-width: 48rem) {
    .pregi-nastro__elenco {
  flex-direction: row;
  justify-content: space-around;
  text-align: center;
}
    .bollo-riga {
  flex-direction: row;
  justify-content: center;
}
    .copertina {
  height: 520px;
}
    .bollo-adesivo {
  height: 200px;
  width: 200px;
  font-size: 1.375rem;
}
}
@media (min-width: 62rem) {
    .blocco {
  padding: 3.75rem 0px;
}
    h1 {
  font-size: 2.5rem;
}
    h2 {
  font-size: 1.75rem;
}
    .cornice {
  padding: 0px 1.875rem;
}
    .barra__voci {
  display: flex;
  gap: 1.75rem;
  margin-left: 2rem;
}
    .panino {
  display: none;
}
    .copertina {
  height: 585px;
}
    .colonna-ampia-6 {
  width: 50% !important;
}
    .colonna-ampia-4 {
  width: 33.333% !important;
}
    .colonna-ampia-3 {
  width: 25% !important;
}
    .note .colonna {
  width: 20% !important;
}
    .volti {
  column-gap: 0px;
}
    .vetrino-box {
  flex-basis: 32%;
}
    /* note chiare */
    .procedura {
  padding-top: 2.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
  animation: none !important;
  transition: none !important;
}
}

/* tappe */
.pagina-testa {
  padding: 120px 0 2.5rem;
}
.pagina-testa h1 {
  margin-bottom: 0.75rem;
}
.allinea-riga {
  align-items: center;
  row-gap: 1.5rem;
}
.immagine-tonda {
  aspect-ratio: 9 / 7;
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}
.immagine-estesa {
  margin: 2rem 0px;
}
.immagine-estesa img {
  aspect-ratio: 7 / 3;
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}
.immagine-estesa figcaption {
  margin-top: 0.5rem;
  color: var(--attenuato);
  font-size: 0.875rem;
}
.norme-corpo {
  max-width: 900px;
}
.norme-corpo h3 {
  margin: 2rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filo);
}
.norme-corpo h3:first-child {
  margin-top: 0px;
}
.form-box {
  margin-bottom: 3rem;
  max-width: 720px;
  padding: 2rem 1.5rem;
  background: var(--fondo-1);
  border-radius: 3px;
}
.tappe-indice {
  display: flex;
  gap: 0.5rem;
  margin: 0px 0 1.5rem;
  padding: 0px;
  counter-reset: p;
  list-style: none;
}
.tappe-indice li {
  flex: 1;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  border-top: 3px solid var(--filo);
  counter-increment: p;
}
.tappe-indice li::before {
  content: counter(p) ". ";
}
.tappe-indice li.acceso {
  border-top-color: var(--colore-vivo);
}
.tappa {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
.tappa legend {
  margin-bottom: 1rem;
  padding: 0px;
  color: var(--colore-scuro);
  font: 400 1.375rem Manrope, Arial, sans-serif;
}
.campo-lbl {
  display: block;
  margin: 0.75rem 0 0.375rem;
  font-weight: 700;
}
.tappa input[type="text"], .tappa input[type="email"], .tappa select {
  height: 48px;
  padding: 0.5rem 0.75rem;
  width: 100%;
  font: 400 1rem "Nunito Sans", Arial, sans-serif;
  background: #FFF;
  border-radius: 3px;
  border: 1px solid #DDE1EA;
}
.tappa input:invalid:not(:placeholder-shown) {
  border-color: #B3261E;
}
.opzioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.opzioni label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
}
.assenso-lbl {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0px;
}
.assenso-lbl input {
  margin-top: 3px;
}
.celato {
  left: -9999px;
  position: absolute;
}
.tappa .tasto-riga {
  margin-top: 1.25rem;
}
.tri-tappe__risposta {
  margin: 1rem 0 0px;
  min-height: 1.5em;
  font-weight: 700;
}
.seguito-form {
  margin-top: 1rem;
}
.avvio h1 {
  font-size: clamp(1.9375rem, 1.2rem + 2vw, 2.5rem);
  text-wrap: balance;
}
.avvio__sottotitolo, .scheda-box p {
  text-wrap: pretty;
}
.tappe-numerate {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0px;
  padding: 0px;
  counter-reset: n;
  list-style: none;
}
.tappe-numerate li {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 18px 64px;
  border-radius: 3px;
  border: 1px solid #DDE1EA;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.06);
  counter-increment: n;
}
.tappe-numerate li::before {
  display: grid;
  left: 18px;
  position: absolute;
  top: 16px;
  place-items: center;
  height: 32px;
  width: 32px;
  color: #FFF;
  font: 700 1rem Manrope, Arial, sans-serif;
  background: #2B2A4C;
  border-radius: 50%;
  content: counter(n);
}
.base-nastro a, .base-nastro span {
  min-height: 24px;
}
.dropdown-menu a, .menu-vecchio-lista a {
  min-height: 32px;
}
@media (min-width: 62rem) { .tappe-numerate {
  grid-template-columns: repeat(3, 1fr);
} }

/* domande */
.carte-annata {
  padding: 3.5rem 0px 3rem;
}
.carte-annata-avvio {
  max-width: 38rem;
  color: var(--attenuato);
}
.carte-annata-fila {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
.carte-annata-elemento {
  padding: 1.25rem 1.25rem 0.75rem;
  background: var(--fondo-1);
  border-left: 4px solid var(--colore-vivo);
}
.carte-annata-periodo {
  margin: 0.75rem 0px 0.25rem;
  color: var(--attenuato);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.carte-annata-elemento h3 {
  margin-bottom: 0.4rem;
  font-size: 1.15rem;
}
@media (min-width: 48rem) {
    .carte-annata-fila {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
}
}

/* piede */
.scorri-binario {
  display: grid !important;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible !important;
}
.scorri-binario .vetrino-box {
  flex: none !important;
  min-width: 0;
  width: auto !important;
}
@media (max-width: 575px) { .scorri-binario {
  grid-template-columns: 1fr;
} }
.tondo {
  border-radius: 18px;
}

/* avviso privacy */
.barra__voci a {
  font-size: .9375rem;
  white-space: nowrap;
}