/* ==========================================================================
   Agenda sul bancone: copertina blu, fogli a righe, penna ed evidenziatore.
   ========================================================================== */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* copertina dell'agenda */
  --copertina: #1E3AA8;
  --copertina-scura: #162C85;
  --copertina-tenue: #C9D3FF;

  /* fogli e scrittura */
  --carta: #FAFBFE;
  --foglio: #FFFFFE;
  --righe: #D5DEF0;
  --margine: #E0605A;
  --inchiostro: #1A2246;
  --inchiostro-tenue: #4A5478;
  --penna: #2747C4;
  --matita: #8D99C7;

  /* evidenziatori */
  --evid-giallo: #FFE94A;
  --evid-rosa: #FFC2E0;
  --evid-verde: #BDF3A8;
  --evid-azzurro: #B3E1FF;
  --evid-arancio: #FFD29A;

  /* conferma e WhatsApp */
  --conferma: #16714A;
  --wa: #25D366;
  --wa-chiaro: #3BE07A;
  --wa-scuro: #0B3D22;
  --wa-bordo: #18A651;

  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-penna: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --gutter: max(1rem, 4vw);
  --larghezza: 72rem;
  --riga: 2rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --ombra-foglio: 0 1px 0 #E2E7F3, 0 2px 0 var(--foglio), 0 3px 0 #E2E7F3,
    0 18px 36px -16px rgb(6 14 56 / 0.6);
}

/* --- base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--copertina) var(--carta);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--carta);
  font-kerning: normal;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 1.25rem + 2.5vw, 3.1rem);
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

p,
ul,
ol {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

b {
  font-weight: 700;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--evid-giallo);
  color: var(--inchiostro);
}

:focus-visible {
  outline: 3px solid var(--copertina);
  outline-offset: 3px;
  border-radius: 6px;
}

.copertina :focus-visible {
  outline-color: var(--evid-giallo);
}

.copertina .foglio :focus-visible {
  outline-color: var(--copertina);
}

.salta {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--evid-giallo);
  color: var(--inchiostro);
  font-weight: 700;
  text-decoration: none;
}

.salta:focus {
  top: 1rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visualmente-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icona {
  width: 1.3em;
  height: 1.3em;
  flex: none;
}

.penna {
  font-family: var(--font-penna);
  font-weight: 600;
  color: var(--penna);
  line-height: 1.1;
}

/* --- materiali ----------------------------------------------------------- */

/* tela della copertina: due trame sottili incrociate */
.copertina {
  background-color: var(--copertina);
  background-image:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(45deg, rgb(4 10 50 / 0.06) 0 1px, transparent 1px 5px);
  color: #fff;
}

.carta {
  background: var(--carta);
}

.sezione {
  padding: clamp(4rem, 3rem + 5vw, 7.5rem) var(--gutter);
}

.contenitore {
  max-width: var(--larghezza);
  margin-inline: auto;
}

/* --- pulsanti ------------------------------------------------------------ */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(8 16 60 / 0.18), 0 6px 14px -6px rgb(8 16 60 / 0.45);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background-color 150ms;
}

.bottone:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgb(8 16 60 / 0.18), 0 10px 20px -8px rgb(8 16 60 / 0.5);
}

.bottone:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 1px 1px rgb(8 16 60 / 0.2);
}

.bottone--pieno {
  background: var(--copertina);
  color: #fff;
}

.bottone--pieno:hover {
  background: var(--copertina-scura);
}

.bottone--wa {
  background: var(--wa);
  border-color: var(--wa-bordo);
  color: var(--wa-scuro);
}

.bottone--wa:hover {
  background: var(--wa-chiaro);
}

.bottone--contorno {
  border-color: var(--copertina);
  background: var(--foglio);
  color: var(--copertina);
  box-shadow: none;
}

.bottone--contorno:hover {
  background: #EEF2FC;
}

.fascicolo__prova {
  margin-top: 0.75rem;
}

.fascicolo__prova a {
  color: var(--copertina);
  font-weight: 700;
}

.bottone--grande {
  min-height: 3.75rem;
  padding-inline: 1.75rem;
  font-size: 1.2rem;
}

/* --- testata ------------------------------------------------------------- */

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(var(--gutter), (100% - var(--larghezza)) / 2);
}

/* in home la testata sta sopra la copertina, così la tela resta un pezzo unico */
.testata--sopra {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  color: #fff;
}

.testata :focus-visible {
  outline-color: var(--evid-giallo);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}

.marchio__segno {
  width: 2rem;
  height: 2rem;
}

.marchio__spunta {
  stroke: var(--evid-giallo);
}

.testata__nav {
  display: none;
}

.testata__nav ul {
  display: flex;
  gap: 1.75rem;
  padding: 0;
  list-style: none;
}

.testata__nav a {
  color: var(--copertina-tenue);
  font-weight: 600;
  text-decoration: none;
}

.testata__nav a:hover {
  color: #fff;
  text-decoration: underline;
}

.testata__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--wa-bordo);
  border-radius: 999px;
  background: var(--wa);
  color: var(--wa-scuro);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms;
}

.testata__wa:hover {
  background: var(--wa-chiaro);
}

.testata__chiamata {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--copertina);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms;
}

.testata__chiamata:hover {
  background: var(--copertina-tenue);
}

.testata__chiamata {
  white-space: nowrap;
}

.testata__chiamata .testo-corto {
  display: none;
}

@media (max-width: 599px) {
  .testata__chiamata .testo-lungo {
    display: none;
  }

  .testata__chiamata .testo-corto {
    display: inline;
  }
}

@media (min-width: 1000px) {
  .testata__nav {
    display: block;
    margin-left: auto;
  }

  .testata__wa,
  .testata__chiamata {
    margin-left: 1rem;
  }
}

/* --- 1. apertura: l'agenda aperta --------------------------------------- */

.apertura {
  padding: 5.5rem var(--gutter) clamp(3.5rem, 7vw, 6rem);
}

.agenda {
  position: relative;
  display: grid;
  max-width: var(--larghezza);
  margin-inline: auto;
}

.foglio {
  position: relative;
  background-color: var(--foglio);
  color: var(--inchiostro);
  box-shadow: var(--ombra-foglio);
}

.foglio--sinistro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 10px 10px 3px 3px;
}

.foglio--destro {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: 3px 3px 10px 10px;
}

/* righe del foglio: una ogni --riga, sotto ogni fascia oraria */
.fasce {
  flex: 1;
  min-height: calc(var(--riga) * 8);
  background-image: linear-gradient(transparent calc(var(--riga) - 1px), var(--righe) calc(var(--riga) - 1px));
  background-size: 100% var(--riga);
}

/* spirale metallica tra i due fogli */
.spirale {
  position: relative;
  z-index: 2;
  height: 3.5rem;
  margin: -1.15rem 0.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 56'%3E%3Ccircle cx='11' cy='9' r='3' fill='%23162C85'/%3E%3Ccircle cx='11' cy='47' r='3' fill='%23162C85'/%3E%3Cpath d='M11 9C4 18 4 38 11 47' fill='none' stroke='%23525C7E' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M11 9C4 18 4 38 11 47' fill='none' stroke='%23DCE1EC' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 22px 56px;
  pointer-events: none;
}

.agenda h1 {
  font-size: clamp(2.25rem, 1.15rem + 3.7vw, 4.15rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.evidenziato {
  background-image: linear-gradient(100deg, transparent 0.12em, var(--evid-giallo) 0.12em calc(100% - 0.1em), transparent calc(100% - 0.1em));
  background-repeat: no-repeat;
  background-size: 100% 58%;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
}

.sottotitolo {
  max-width: 34ch;
  color: var(--inchiostro-tenue);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.45;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.foglio__nota {
  margin-top: 0.25rem;
  font-size: 1.7rem;
  transform: rotate(-2deg);
  transform-origin: left center;
}

@media (max-width: 479px) {
  .azioni .bottone {
    width: 100%;
  }
}

/* la pagina del giorno */
.giorno {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--inchiostro);
}

.giorno__numero {
  order: -1;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.giorno__nome {
  font-size: 1.15rem;
  font-weight: 700;
}

.giorno__esempio {
  margin-left: auto;
  font-size: 1.5rem;
  transform: rotate(-5deg);
}

.fascia {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  height: calc(var(--riga) * 2);
}

.fascia__ora {
  padding-top: 0.3rem;
  border-right: 1.5px solid var(--margine);
  color: var(--inchiostro-tenue);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.voce {
  display: flex;
  align-items: center;
  padding: 0.3rem 0 0.3rem 0.85rem;
}

.voce__testo {
  padding: 0.05em 0.35em;
  border-radius: 0.25em 0.55em 0.3em 0.5em;
  color: var(--penna);
  font-family: var(--font-penna);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
}

.voce__testo b {
  font-weight: 700;
}

.evid-rosa { background: var(--evid-rosa); }
.evid-verde { background: var(--evid-verde); }
.evid-azzurro { background: var(--evid-azzurro); }

.fascia--extra {
  display: none;
}

/* la richiesta che si conferma */
.fascia--richiesta {
  height: calc(var(--riga) * 3);
}

.richiesta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "chi tasti"
    "stato tasti";
  align-items: center;
  column-gap: 0.75rem;
  margin: 0.35rem 0 0.5rem 0.55rem;
  padding: 0.45rem 0.65rem;
  border: 1.5px dashed transparent;
  border-radius: 9px;
  transition: border-color 250ms, background-color 250ms;
}

.richiesta--attesa {
  border-color: var(--matita);
  background-color: rgb(39 71 196 / 0.04);
}

.richiesta__chi {
  grid-area: chi;
  justify-self: start;
  padding: 0 0.2em;
  background: linear-gradient(var(--evid-giallo), var(--evid-giallo)) no-repeat 0 65% / 100% 75%;
  font-size: 1.05rem;
  transition: background-size 520ms var(--ease) 120ms;
}

.richiesta__chi b {
  font-weight: 800;
}

.richiesta--attesa .richiesta__chi {
  background-size: 0% 75%;
}

.richiesta__stato {
  grid-area: stato;
  display: grid;
  color: var(--inchiostro-tenue);
  font-size: 0.85rem;
}

.richiesta__stato > span {
  grid-area: 1 / 1;
  transition: opacity 250ms;
}

.stato-attesa {
  opacity: 0;
}

.stato-ok {
  opacity: 1;
}

.richiesta--attesa .stato-attesa {
  opacity: 1;
}

.richiesta--attesa .stato-ok {
  opacity: 0;
}

.richiesta__tasti {
  grid-area: tasti;
  display: flex;
  gap: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms 100ms, visibility 0s 300ms;
}

.richiesta--attesa .richiesta__tasti {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.tasto {
  position: relative;
  padding: 0.4rem 0.65rem;
  border: 1.5px solid;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.tasto--no {
  border-color: #B9C1DC;
  background: var(--foglio);
  color: var(--inchiostro-tenue);
}

.tasto--si {
  border-color: var(--conferma);
  background: var(--conferma);
  color: #fff;
}

.tocco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%;
  background: rgb(22 113 74 / 0.35);
  opacity: 0;
  pointer-events: none;
}

.richiesta.gioca .tocco {
  animation: tocco 700ms var(--ease) forwards;
}

.richiesta.gioca .tasto--si {
  animation: premi 260ms ease-out 80ms;
}

@keyframes tocco {
  0% { opacity: 0; transform: scale(0.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes premi {
  50% { transform: scale(0.92); }
}

.timbro-ok {
  grid-area: tasti;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem 0.25rem 0.4rem;
  border: 2px solid var(--conferma);
  border-radius: 7px;
  color: var(--conferma);
  font-size: 0.9rem;
  font-weight: 800;
  transform: rotate(-6deg);
  transition: opacity 180ms 340ms, transform 420ms var(--ease) 340ms;
}

.timbro-ok svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 380ms var(--ease) 520ms;
}

.richiesta--attesa .timbro-ok {
  opacity: 0;
  transform: rotate(-6deg) scale(1.3);
  transition: none;
}

.richiesta--attesa .timbro-ok svg {
  stroke-dashoffset: 26;
  transition: none;
}

/* telefoni stretti: i tasti vanno sotto la richiesta */
@media (max-width: 479px) {
  .fascia--richiesta {
    height: calc(var(--riga) * 4);
  }

  .richiesta {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chi"
      "stato"
      "tasti";
    row-gap: 0.3rem;
  }

  .richiesta__tasti,
  .timbro-ok {
    justify-self: start;
  }
}

@media (min-width: 900px) {
  .agenda {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    align-items: stretch;
  }

  .foglio--sinistro {
    justify-content: center;
    border-radius: 10px 3px 3px 10px;
  }

  .foglio--destro {
    grid-column: 2;
    grid-row: 1;
    border-radius: 3px 10px 10px 3px;
  }

  .foglio__nota {
    margin-top: auto;
  }

  .spirale {
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 50%;
    width: 3.5rem;
    height: auto;
    margin: 0;
    transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 22'%3E%3Ccircle cx='9' cy='11' r='3' fill='%23162C85'/%3E%3Ccircle cx='47' cy='11' r='3' fill='%23162C85'/%3E%3Cpath d='M9 11C18 4 38 4 47 11' fill='none' stroke='%23525C7E' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M9 11C18 4 38 4 47 11' fill='none' stroke='%23DCE1EC' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y center / 56px 22px;
  }

  .fascia--extra {
    display: grid;
  }
}

/* --- 2. il problema ------------------------------------------------------ */

.problema__griglia {
  display: grid;
  gap: 3rem;
}

.problema h2 {
  max-width: 17ch;
}

.righe {
  margin-top: 2rem;
  border-top: 2px solid var(--inchiostro);
}

.righe li {
  position: relative;
  padding: 0.95rem 0 0.95rem 2.4rem;
  border-bottom: 1px solid var(--righe);
  font-size: 1.125rem;
}

.righe li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.1rem;
  width: 1.3rem;
  height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4.5c4 3.5 8 7.5 12 11M15.5 4c-3.5 4-7 7.5-11.5 12' fill='none' stroke='%23C9343A' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.telefono {
  width: min(100%, 19rem);
  margin-inline: auto;
  padding: 0.6rem;
  border-radius: 2.5rem;
  background: #0F1430;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 14px 24px -14px rgb(8 16 60 / 0.5),
    0 40px 70px -30px rgb(8 16 60 / 0.55);
}

.telefono__schermo {
  min-height: 31rem;
  border-radius: 1.95rem;
  overflow: hidden;
}

.telefono--bloccato .telefono__schermo {
  padding: 2.5rem 0.9rem 1.25rem;
  background: linear-gradient(172deg, #3346A0 0%, #18215A 62%, #10173F 100%);
  color: #fff;
  text-align: center;
}

.blocco__ora {
  font-size: 4.25rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.blocco__data {
  margin-top: 0.4rem;
  color: #DCE2FF;
}

.notifiche {
  display: grid;
  gap: 0.5rem;
  margin-top: 2.25rem;
  text-align: left;
}

.notifica {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.7rem 0.75rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.13);
  font-size: 0.875rem;
  line-height: 1.3;
}

.notifica b {
  display: block;
}

.notifica span {
  color: #E3E8FF;
}

.notifica time {
  color: #C9D3FF;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.notifica .icona {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
}

@media (max-width: 899px) {
  .telefono--bloccato .telefono__schermo {
    min-height: 0;
  }
}

@media (min-width: 900px) {
  .problema__griglia {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
  }

  .telefono--bloccato {
    transform: rotate(3deg);
  }
}

/* --- vicino davvero: il supporto in sede -------------------------------- */

.vicino {
  padding-top: 0;
}

.vicino__griglia {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 16px;
  background: var(--copertina);
  background-image:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(45deg, rgb(4 10 50 / 0.06) 0 1px, transparent 1px 5px);
  color: #fff;
}

.vicino h2 {
  max-width: 16ch;
}

.vicino .evidenziato {
  color: var(--inchiostro);
}

.vicino__intro {
  max-width: 46ch;
  margin-top: 1rem;
  color: var(--copertina-tenue);
  font-size: 1.15rem;
}

.vicino__punti {
  margin-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}

.vicino__punti li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2.4rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
  color: var(--copertina-tenue);
}

.vicino__punti b {
  color: #fff;
}

.vicino__punti li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.9rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.6 1.2 3 2.6 4.4 4.4C11 12 14.6 8.2 20.5 5.5' fill='none' stroke='%23FFE94A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vicino :focus-visible {
  outline-color: var(--evid-giallo);
}

/* il timbro tondo con la zona servita */
.timbro-zona {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(15rem, 62vw);
  aspect-ratio: 1;
  border: 4px solid var(--evid-giallo);
  border-radius: 50%;
  color: var(--evid-giallo);
  text-align: center;
  transform: rotate(-8deg);
  box-shadow: inset 0 0 0 6px var(--copertina), inset 0 0 0 8px rgb(255 233 74 / 0.6);
}

.timbro-zona__in {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.timbro-zona__giro {
  position: absolute;
  bottom: 20%;
  left: 12%;
  right: 12%;
  font-family: var(--font-penna);
  font-size: 1.05rem;
  white-space: nowrap;
  font-weight: 600;
}

@media (min-width: 900px) {
  .vicino__griglia {
    grid-template-columns: 1.4fr 0.6fr;
    gap: 3rem;
  }
}

/* --- 3. demo: la rubrica ------------------------------------------------- */

.demo {
  padding-top: 0;
}

.demo__intro {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
  margin-bottom: 2.25rem;
}

.demo__intro p {
  color: var(--inchiostro-tenue);
  font-size: 1.125rem;
}

.rubrica {
  display: grid;
  border-top: 2px solid var(--inchiostro);
}

.rubrica li {
  border-bottom: 1px solid var(--righe);
}

.rubrica__link {
  display: grid;
  grid-template-columns: 2.5rem 1.85rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.25rem;
  padding: 0.5rem 0.25rem 0.5rem 0;
  color: var(--inchiostro);
  text-decoration: none;
}

.rubrica__lettera {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.75rem;
  border-radius: 3px 10px 10px 3px;
  background: var(--tinta);
  font-size: 1.15rem;
  font-weight: 800;
}

.rubrica__lettera:empty {
  opacity: 0.45;
}

.rubrica__icona {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--copertina);
}

.rubrica__nome {
  justify-self: start;
  padding: 0 0.15em;
  background: linear-gradient(var(--tinta), var(--tinta)) no-repeat 0 70% / 0% 62%;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: background-size 280ms var(--ease);
}

.rubrica__apri {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--copertina);
  font-size: 0.95rem;
  font-weight: 700;
}

.rubrica__apri .icona {
  width: 1.4rem;
  height: 1.4rem;
  transition: transform 200ms var(--ease);
}

.rubrica__apri-testo {
  display: none;
}

.rubrica__link:hover .rubrica__nome,
.rubrica__link:focus-visible .rubrica__nome {
  background-size: 100% 62%;
}

.rubrica__link:hover .rubrica__apri .icona {
  transform: translate(2px, -2px);
}

.rubrica__link:focus-visible {
  outline-offset: -2px;
}

.avviso {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: var(--evid-giallo);
}

/* un lavoro già fatto: il sito vero di una cliente */
.lavoro-fatto {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-top: 3rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #E0E6F3;
  border-radius: 14px;
  background: var(--foglio);
  box-shadow: 0 1px 2px rgb(8 16 60 / 0.08), 0 22px 44px -26px rgb(8 16 60 / 0.4);
}

.lavoro-fatto__nota {
  font-size: 1.6rem;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.lavoro-fatto__finestra {
  display: grid;
  overflow: hidden;
  border: 1px solid #D5DEF0;
  border-radius: 10px;
}

.lavoro-fatto__barra {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: #EEF2FA;
  font-size: 0.85rem;
}

.lavoro-fatto__barra span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #C5CDE3;
}

.lavoro-fatto__barra b {
  margin-left: 0.5rem;
  color: var(--inchiostro-tenue);
  font-weight: 600;
}

.lavoro-fatto__anteprima {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  padding: 1.5rem 1.25rem;
  background: #FBF3EF;
}

.lavoro-fatto__anteprima small {
  color: #8A5A44;
  font-size: 0.8rem;
  font-weight: 700;
}

.lavoro-fatto__anteprima strong {
  color: #3A2418;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.lavoro-fatto__finto-tasto {
  margin-top: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: #3A2418;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.lavoro-fatto__testo h3 {
  font-size: 1.3rem;
}

.lavoro-fatto__testo p {
  margin-top: 0.6rem;
  color: var(--inchiostro-tenue);
}

.lavoro-fatto__link {
  display: inline-block;
  margin-top: 1rem;
  padding-block: 0.4rem;
  color: var(--copertina);
  font-weight: 800;
}

@media (min-width: 760px) {
  .lavoro-fatto {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }

  .lavoro-fatto__nota {
    grid-column: 1 / -1;
  }
}

@media (min-width: 480px) {
  .rubrica__apri-testo {
    display: inline;
  }
}

@media (min-width: 760px) {
  .rubrica {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 3.5rem;
  }
}

/* --- 4. dietro: il gestionale ------------------------------------------- */

.dietro__griglia {
  display: grid;
  gap: 3.5rem;
}

.dietro h2 {
  max-width: 15ch;
}

.dietro__intro {
  margin-top: 1rem;
  color: var(--copertina-tenue);
  font-size: 1.125rem;
}

.spunte {
  margin-top: 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}

.spunte li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2.4rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
  color: var(--copertina-tenue);
}

.spunte b {
  color: #fff;
}

.spunte li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.6 1.2 3 2.6 4.4 4.4C11 12 14.6 8.2 20.5 5.5' fill='none' stroke='%23FFE94A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.telefono--app {
  background: #0B0F26;
}

.telefono--app .telefono__schermo {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem 0;
  background: var(--foglio);
  color: var(--inchiostro);
}

.app__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--inchiostro);
}

.app__titolo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app__data {
  color: var(--inchiostro-tenue);
  font-size: 0.9rem;
}

.app__elenco li {
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: 0.15rem 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--righe);
  font-size: 0.95rem;
  line-height: 1.3;
}

.app__elenco time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app__elenco b {
  font-weight: 800;
}

.app__nuova span {
  justify-self: start;
  padding: 0 0.15em;
  background: linear-gradient(var(--evid-giallo), var(--evid-giallo)) no-repeat 0 70% / 100% 70%;
}

.app__nuova em {
  grid-column: 2;
  color: var(--conferma);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 800;
}

.app__promemoria {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--wa);
  color: var(--wa-scuro);
  font-size: 0.8rem;
  font-weight: 700;
}

.app__promemoria .icona {
  width: 1rem;
  height: 1rem;
}

.app__schede {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: auto -1rem 0;
  padding: 0.6rem 0 1rem;
  border-top: 1px solid var(--righe);
}

.app__schede span {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  color: var(--inchiostro-tenue);
  font-size: 0.75rem;
  font-weight: 600;
}

.app__schede .attiva {
  color: var(--copertina);
  font-weight: 800;
}

.app__schede .icona {
  width: 1.35rem;
  height: 1.35rem;
}

.bonus {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 2px solid rgb(255 255 255 / 0.3);
}

.bonus__titolo {
  color: #fff;
  font-size: 1.35rem;
}

.bonus__elenco {
  display: grid;
  gap: 1rem 2.5rem;
  margin-top: 1.25rem;
}

.bonus__elenco li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--copertina-tenue);
}

.bonus__elenco b {
  color: #fff;
}

.bonus__elenco .icona {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--evid-giallo);
}

@media (min-width: 760px) {
  .bonus__elenco {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .dietro__griglia {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
  }

  .telefono--app {
    transform: rotate(-2.5deg);
  }
}

/* --- 5. come funziona: la settimana ------------------------------------- */

.come__griglia {
  display: grid;
  gap: 2.5rem;
}

.come__intro p {
  max-width: 36ch;
  margin-top: 1rem;
  color: var(--inchiostro-tenue);
  font-size: 1.125rem;
}

.settimana {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  border-top: 2px solid var(--inchiostro);
}

.settimana__giorno {
  position: relative;
  grid-column: 1;
  min-height: 3rem;
  padding: 0.75rem 0 0.5rem 0.5rem;
  border-right: 1.5px solid var(--margine);
  border-bottom: 1px solid var(--righe);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.settimana__giorno span {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--inchiostro-tenue);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
}

.g1 { grid-row: 1; }
.g2 { grid-row: 2; }
.g3 { grid-row: 3; }
.g4 { grid-row: 4; }
.g5 { grid-row: 5; }
.g6 { grid-row: 6; }
.g7 { grid-row: 7; }

/* giorni 2-6 passati con l'evidenziatore, come in un calendario */
.g2,
.g3,
.g4,
.g5,
.g6 {
  padding-top: 0.85rem;
  background: linear-gradient(90deg, transparent 0.25rem, var(--evid-giallo) 0.25rem 2.6rem, transparent 2.6rem);
}

/* giorno 1 cerchiato a penna, giorno 7 spuntato */
.g1::after,
.g7::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.g1::after {
  left: -0.1rem;
  top: 1.35rem;
  width: 3rem;
  height: 2.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M33 5C18 3 5 11 6 26c1 13 14 20 28 19 13-1 22-9 21-21C54 11 42 3 26 6' fill='none' stroke='%232747C4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.g7::after {
  left: 2rem;
  top: 1.2rem;
  width: 1.9rem;
  height: 1.9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.6 1.2 3 2.6 4.4 4.4C11 12 14.6 8.2 20.5 5.5' fill='none' stroke='%2316714A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tappa {
  grid-column: 2;
  padding: 1rem 0 1.15rem 1.25rem;
  border-bottom: 1px solid var(--righe);
}

.tappa p {
  margin-top: 0.4rem;
  color: var(--inchiostro-tenue);
}

.tappa--1 { grid-row: 1; }
.tappa--3 { grid-row: 7; }

.tappa--2 {
  grid-row: 2 / 7;
  align-self: center;
  border-bottom: 0;
}

.tappa .tappa__quando {
  margin: 0 0 0.35rem;
  color: var(--penna);
  font-family: var(--font-penna);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 900px) {
  .come__griglia {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 5rem;
    align-items: start;
  }
}

/* --- 6. prezzo: il biglietto dell'appuntamento -------------------------- */

.prezzo {
  padding-top: 0;
}

.prezzo__griglia {
  display: grid;
  gap: 2.5rem;
}

.prezzo__testo p {
  max-width: 36ch;
  margin-top: 1rem;
  color: var(--inchiostro-tenue);
  font-size: 1.125rem;
}

.biglietto {
  position: relative;
  max-width: 34rem;
  padding: 2.25rem clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid #E0E6F3;
  border-radius: 14px;
  background: var(--foglio);
  box-shadow: 0 1px 2px rgb(8 16 60 / 0.08), 0 26px 50px -24px rgb(8 16 60 / 0.4);
}

/* fascia stampata in testa al biglietto */
.biglietto::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 0.65rem;
  border-radius: 14px 14px 0 0;
  background: var(--copertina);
}

.biglietto__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.6rem;
  margin-top: 0.5rem;
}

.cifra {
  position: relative;
  padding: 0 0.12em;
  font-size: clamp(3.75rem, 2.6rem + 5vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.cerchio-penna {
  position: absolute;
  left: -14%;
  top: -24%;
  width: 128%;
  height: 150%;
  fill: none;
  stroke: var(--penna);
  stroke-width: 2.5;
  stroke-linecap: round;
  overflow: visible;
  pointer-events: none;
}

.cerchio-penna path {
  vector-effect: non-scaling-stroke;
}

.biglietto__mese {
  color: var(--inchiostro-tenue);
  font-size: 1.35rem;
  font-weight: 700;
}

.biglietto__voci {
  margin-top: 1.75rem;
  border-top: 1px solid var(--righe);
}

.biglietto__voci li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  border-bottom: 1px solid var(--righe);
}

.biglietto__voci li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.3rem;
  height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.6 1.2 3 2.6 4.4 4.4C11 12 14.6 8.2 20.5 5.5' fill='none' stroke='%232747C4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.biglietto__garanzia {
  margin-top: 1.25rem;
}

.biglietto .bottone {
  width: 100%;
  margin-top: 1.5rem;
}

.timbro {
  display: inline-block;
  max-width: 11rem;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.6rem;
  border: 2.5px solid var(--conferma);
  border-radius: 8px;
  color: var(--conferma);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-3deg);
}

@media (min-width: 560px) {
  .timbro {
    position: absolute;
    top: 2rem;
    right: 1.5rem;
    max-width: 9.5rem;
    margin: 0;
    transform: rotate(7deg);
  }
}

@media (min-width: 900px) {
  .prezzo__griglia {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 5rem;
    align-items: center;
  }

  .biglietto {
    transform: rotate(-1deg);
  }
}

/* --- 7. domande ---------------------------------------------------------- */

.domande {
  padding-top: 0;
}

.domande__griglia {
  display: grid;
  gap: 2rem;
}

.faq {
  border-top: 2px solid var(--inchiostro);
}

.faq details {
  border-bottom: 1px solid var(--righe);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 0.9rem 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M4.5 12h15' fill='none' stroke='%232747C4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 220ms var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--copertina);
}

.faq details p {
  max-width: 62ch;
  padding: 0 0.25rem 1.35rem;
  color: var(--inchiostro-tenue);
}

@media (min-width: 900px) {
  .domande__griglia {
    grid-template-columns: 0.75fr 1.25fr;
    gap: 5rem;
    align-items: start;
  }
}

/* --- 8. contatto e chi siamo -------------------------------------------- */

.contatto__griglia {
  display: grid;
  gap: 3.5rem;
}

.contatto__invito h2 {
  font-size: clamp(2.3rem, 1.35rem + 3.6vw, 4rem);
}

.contatto__invito p {
  max-width: 40ch;
  margin-top: 1rem;
  color: var(--copertina-tenue);
  font-size: 1.15rem;
}

.contatto .bottone {
  margin-top: 1.75rem;
}

.contatto__invito .contatto__nota {
  margin-top: 0.85rem;
  color: var(--evid-giallo);
  font-family: var(--font-penna);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.chi-siamo {
  padding-top: 1.5rem;
  border-top: 2px solid rgb(255 255 255 / 0.3);
}

.chi-siamo__titolo {
  font-size: 1.35rem;
}

.chi-siamo p {
  margin-top: 0.6rem;
  color: var(--copertina-tenue);
}

@media (max-width: 479px) {
  .contatto .bottone {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .contatto__griglia {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 5rem;
    align-items: end;
  }
}

/* --- 9. piede ------------------------------------------------------------ */

.piede {
  padding: 2.25rem var(--gutter) 2.75rem;
  background-color: var(--copertina-scura);
  color: var(--copertina-tenue);
  font-size: 0.95rem;
}

.piede__griglia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

.piede .marchio {
  margin-right: auto;
  color: #fff;
}

.piede a {
  color: #fff;
}

.piede__contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.piede__contatti a {
  display: inline-block;
  padding-block: 0.4rem;
}

.piede__legale {
  flex-basis: 100%;
}

/* ==========================================================================
   Sito per le imprese (imprese/index.html): la scrivania dell'ufficio,
   con raccoglitori, cartelline e post-it. Stessi colori e caratteri.
   ========================================================================== */

.bottone--chiaro {
  background: #fff;
  color: var(--copertina);
}

.bottone--chiaro:hover {
  background: var(--copertina-tenue);
}

.contatto-secondario {
  margin-top: 0.85rem;
  color: var(--inchiostro-tenue);
  overflow-wrap: anywhere;
}

.contatto-secondario a {
  color: var(--copertina);
  font-weight: 700;
}

.imprese .contatto__invito .contatto__nota {
  color: var(--copertina-tenue);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 400;
  transform: none;
}

.imprese .contatto__invito .contatto__nota a {
  color: #fff;
  font-weight: 700;
}

.piede__altro a {
  font-weight: 700;
}

/* --- apertura: la scrivania con lo scaffale ----------------------------- */

.scrivania {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.scrivania__griglia {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.scrivania h1 {
  font-size: clamp(2.2rem, 1.15rem + 3.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.scrivania .sottotitolo {
  max-width: 44ch;
  margin-top: 1.25rem;
}

.scrivania .azioni {
  margin-top: 1.75rem;
}

/* i tre raccoglitori: ogni dorso porta al suo servizio */
.scaffale {
  display: grid;
  gap: 0.75rem;
}

.dorso a {
  --c: var(--copertina);
  --c-testo: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.75rem;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  background: var(--c);
  color: var(--c-testo);
  text-decoration: none;
  box-shadow:
    inset 5px 0 0 rgb(0 0 0 / 0.08),
    inset -5px 0 0 rgb(255 255 255 / 0.14),
    0 12px 22px -14px rgb(8 16 60 / 0.55);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}

.dorso--giallo a { --c: var(--evid-giallo); --c-testo: var(--inchiostro); }
.dorso--verde a { --c: var(--evid-verde); --c-testo: var(--inchiostro); }

.dorso a:hover,
.dorso a:focus-visible {
  transform: translateX(6px);
}

/* finestrella dell'etichetta, come sui raccoglitori veri */
.dorso__etichetta {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgb(26 34 70 / 0.18);
  border-radius: 4px;
  background: var(--foglio);
  color: var(--inchiostro);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.dorso__prezzo {
  flex: none;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--foglio);
  color: var(--inchiostro);
  font-weight: 800;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.dorso__foro {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid rgb(255 255 255 / 0.45);
  border-radius: 50%;
  background: rgb(8 16 60 / 0.22);
  box-shadow: inset 0 3px 5px rgb(0 0 0 / 0.3);
}

@media (max-width: 479px) {
  .dorso__foro {
    display: none;
  }

  .dorso a {
    flex-wrap: wrap;
  }
}

/* da tablet in su i raccoglitori stanno in piedi sullo scaffale */
@media (min-width: 900px) {
  .scrivania__griglia {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
  }

  .scaffale {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 0.9rem;
    height: 27rem;
    padding: 0 0.75rem;
    border-bottom: 10px solid var(--inchiostro);
    border-radius: 0 0 4px 4px;
  }

  .dorso {
    height: 100%;
  }

  .dorso:nth-child(2) {
    height: 92%;
  }

  .dorso:nth-child(3) {
    height: 96%;
  }

  .dorso a {
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 1rem 0.75rem 1.1rem;
    border-radius: 6px 6px 2px 2px;
  }

  .dorso__etichetta {
    flex: none;
    min-height: 7.5rem;
  }

  .dorso__prezzo {
    align-self: center;
    margin-top: 1.25rem;
  }

  .dorso__foro {
    align-self: center;
    margin-top: auto;
  }

  .dorso a:hover,
  .dorso a:focus-visible {
    transform: translateY(-10px);
  }
}

/* --- il problema: la cartella condivisa --------------------------------- */

.intoppi {
  padding-top: 0;
}

.intoppi__griglia {
  display: grid;
  gap: 3rem;
}

.intoppi h2 {
  max-width: 18ch;
}

.finestra {
  width: min(100%, 26rem);
  margin-inline: auto;
  border: 1px solid #D5DEF0;
  border-radius: 10px;
  background: var(--foglio);
  box-shadow: 0 1px 2px rgb(8 16 60 / 0.08), 0 26px 50px -24px rgb(8 16 60 / 0.4);
  overflow: hidden;
}

.finestra__barra {
  padding: 0.75rem 1rem;
  background: var(--copertina);
  color: #fff;
  font-weight: 700;
}

.finestra__file li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--righe);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.finestra__file .icona {
  color: var(--conferma);
}

.finestra__ultimo {
  background: var(--evid-azzurro);
}

.finestra__nota {
  margin: 0.75rem 1rem 1.1rem;
  font-size: 1.6rem;
  transform: rotate(-2deg);
}

@media (min-width: 900px) {
  .intoppi__griglia {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
  }

  .finestra {
    transform: rotate(2deg);
  }
}

/* --- i servizi: un fascicolo per servizio ------------------------------- */

.servizi {
  padding-top: 0;
}

.servizi__intro {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.servizi__intro p {
  color: var(--inchiostro-tenue);
  font-size: 1.125rem;
}

.fascicolo {
  margin-top: 4rem;
  border-radius: 3px 12px 12px 12px;
  box-shadow: 0 1px 2px rgb(8 16 60 / 0.08), 0 26px 50px -28px rgb(8 16 60 / 0.4);
  scroll-margin-top: 2rem;
}

.fascicolo__testa {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  border-radius: 0 12px 0 0;
  background: var(--tinta);
  color: var(--tinta-testo);
}

/* linguetta della cartellina */
.fascicolo__testa::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: min(14rem, 45%);
  height: 1.1rem;
  border-radius: 10px 10px 0 0;
  background: var(--tinta);
}

.fascicolo h3 {
  max-width: 24ch;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

.fascicolo__prezzo {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 700;
}

.fascicolo__cifra {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.fascicolo__corpo {
  display: grid;
  gap: 2rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #E0E6F3;
  border-block: 0;
  background: var(--foglio);
}

.fascicolo__per {
  color: var(--inchiostro-tenue);
  font-size: 1.125rem;
}

.fascicolo__per b {
  color: var(--inchiostro);
}

.fascicolo__esempio {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: rgb(39 71 196 / 0.06);
}

.fascicolo__esempio .penna {
  font-size: 1.35rem;
}

.fascicolo__nota {
  margin-top: 1rem;
  font-size: 1.55rem;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.fascicolo h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 800;
}

.fascicolo__voci {
  border-top: 1px solid var(--righe);
}

.fascicolo__slogan {
  margin-bottom: 0.9rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.fascicolo__h4-dopo {
  margin-top: 1.75rem !important;
}

.fascicolo__casi li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--righe);
  color: var(--inchiostro-tenue);
}

.fascicolo__casi {
  border-top: 1px solid var(--righe);
}

.fascicolo__casi b {
  color: var(--inchiostro);
}

.fascicolo__chiarisco {
  margin-top: 1rem;
  color: var(--inchiostro-tenue);
  font-size: 0.95rem;
}

/* la posta in arrivo: una richiesta e la sua bozza già pronta */
.posta {
  margin-top: 1.25rem;
  border: 1px solid #D5DEF0;
  border-radius: 10px;
  background: var(--foglio);
  box-shadow: 0 16px 30px -22px rgb(8 16 60 / 0.5);
  font-size: 0.95rem;
  overflow: hidden;
}

.posta__barra {
  padding: 0.55rem 0.9rem;
  background: var(--copertina);
  color: #fff;
  font-weight: 700;
}

.posta__mail,
.posta__bozza {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
}

.posta__mail {
  border-bottom: 1px solid var(--righe);
}

.posta__chi {
  display: flex;
  justify-content: space-between;
}

.posta__chi time {
  color: var(--inchiostro-tenue);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.posta__bozza {
  margin: 0.6rem;
  border: 1.5px dashed var(--matita);
  border-radius: 8px;
  background: rgb(255 233 74 / 0.18);
  clip-path: inset(0 0 0 0 round 8px);
  transition: clip-path 900ms var(--ease), opacity 300ms;
}

.posta__etichetta {
  justify-self: start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--evid-giallo);
  font-size: 0.8rem;
  font-weight: 800;
}

.posta__azioni {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.posta__modifica,
.posta__invia {
  padding: 0.3rem 0.75rem;
  border: 1.5px solid;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.posta__modifica {
  border-color: #B9C1DC;
  color: var(--inchiostro-tenue);
}

.posta__invia {
  border-color: var(--copertina);
  background: var(--copertina);
  color: #fff;
}

/* dal telefono al foglio: un rapportino salvato diventa una riga dell'Excel */
.modulo-foglio {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
}

.mini-modulo,
.mini-foglio {
  border: 1px solid #D5DEF0;
  border-radius: 10px;
  background: var(--foglio);
  box-shadow: 0 16px 30px -22px rgb(8 16 60 / 0.5);
  overflow: hidden;
}

.mini-modulo {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.65rem 0.7rem;
  border: 5px solid #0F1430;
  border-radius: 1.1rem;
}

.mini-modulo__titolo,
.mini-foglio__titolo {
  display: block;
  margin: 0 -0.65rem 0.2rem;
  padding: 0.45rem 0.65rem;
  background: var(--copertina);
  color: #fff;
  font-weight: 700;
}

.mini-foglio__titolo {
  margin: 0;
  background: var(--conferma);
}

.mini-modulo__campo {
  display: grid;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--righe);
  border-radius: 5px;
  line-height: 1.25;
}

.mini-modulo__campo small {
  color: var(--inchiostro-tenue);
  font-size: 0.72rem;
}

.mini-modulo__salva {
  justify-self: stretch;
  padding: 0.35rem;
  border-radius: 6px;
  background: var(--copertina);
  color: #fff;
  font-weight: 800;
  text-align: center;
  transition: transform 160ms ease-out;
}

.modulo-foglio__freccia {
  width: 2.2rem;
  color: var(--penna);
}

.mini-foglio table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.mini-foglio th,
.mini-foglio td {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--righe);
  text-align: left;
  font-weight: 400;
}

.mini-foglio th {
  background: #EEF2FA;
  font-weight: 700;
}

.mini-foglio__nuova td {
  background: var(--evid-verde);
  font-weight: 700;
  transition: background-color 600ms ease 250ms, color 300ms ease 150ms;
}

/* prima dell'animazione la riga nuova non c'è ancora */
.modulo-foglio--attesa .mini-foglio__nuova td {
  background: transparent;
  color: transparent;
}

.modulo-foglio--salva .mini-modulo__salva {
  animation: premi 260ms ease-out;
}

@media (max-width: 479px) {
  .modulo-foglio {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .modulo-foglio__freccia {
    justify-self: center;
    transform: rotate(90deg);
  }
}

.fascicolo__voci li,
.passi li {
  position: relative;
  border-bottom: 1px solid var(--righe);
}

.fascicolo__voci li {
  padding: 0.55rem 0 0.55rem 1.9rem;
}

.fascicolo__voci li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.6 1.2 3 2.6 4.4 4.4C11 12 14.6 8.2 20.5 5.5' fill='none' stroke='%232747C4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fascicolo__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
  border: 1px solid #E0E6F3;
  border-top: 1px dashed var(--matita);
  border-radius: 0 0 12px 12px;
  background: var(--foglio);
}

.fascicolo__piede .contatto-secondario {
  margin: 0;
}

@media (max-width: 479px) {
  .fascicolo__piede .bottone {
    width: 100%;
  }
}

@media (min-width: 760px) {
  .fascicolo__corpo {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* --- come lavoro ------------------------------------------------------- */

.come-lavoro {
  padding-top: 0;
}

.come-lavoro__griglia {
  display: grid;
  gap: 2rem;
}

.come-lavoro__intro {
  max-width: 36ch;
  margin-top: 1rem;
  color: var(--inchiostro-tenue);
  font-size: 1.125rem;
}

.passi {
  border-top: 2px solid var(--inchiostro);
  counter-reset: passo;
}

.passi li {
  padding: 1rem 0 1.1rem 3.5rem;
  counter-increment: passo;
}

.passi li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.85rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 3px 10px 10px 3px;
  background: var(--evid-giallo);
  font-size: 1.15rem;
  font-weight: 800;
}

.passi p {
  margin-top: 0.3rem;
  color: var(--inchiostro-tenue);
}

/* il post-it sulla parte legale */
.nota-legale {
  max-width: 44rem;
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  border-radius: 2px;
  background: #FFF4A8;
  box-shadow: 0 14px 24px -16px rgb(8 16 60 / 0.45);
  transform: rotate(-0.6deg);
}

@media (min-width: 900px) {
  .come-lavoro__griglia {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 5rem;
    align-items: start;
  }
}

/* --- pagina privacy ------------------------------------------------------ */

.testata__torna {
  color: #fff;
  font-weight: 700;
}

.documento {
  max-width: 44rem;
  margin-inline: auto;
}

.documento h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem);
}

.documento h2 {
  margin-top: 2.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--inchiostro);
  font-size: 1.5rem;
}

.documento h3 {
  margin-top: 1.75rem;
  font-size: 1.15rem;
}

.documento p,
.documento ul {
  margin-top: 0.85rem;
  max-width: 65ch;
}

.documento ul {
  padding-left: 1.25rem;
}

.documento li + li {
  margin-top: 0.4rem;
}

.documento a {
  color: var(--copertina);
}

.documento__aggiornato {
  color: var(--inchiostro-tenue);
}

.da-compilare {
  padding: 0 0.25em;
  background: var(--evid-giallo);
  color: var(--inchiostro);
  font-weight: 700;
}

/* --- movimento ridotto --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}