/* =========================================================================
   Sartobit — foglio di stile principale
   Riferimento: PROGETTO.md (palette §5, tipografia §6, movimento §7, spazi §8)
   ========================================================================= */

@layer reset, token, base, layout, componenti, sezioni, utilita;

/* -------------------------------------------------------------------------
   Font auto-ospitati
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/young-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/young-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, picture { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

/* -------------------------------------------------------------------------
   Token
   ------------------------------------------------------------------------- */
@layer token {
  :root {
    /* Palette — PROGETTO.md §5 */
    --colore-inchiostro: #1C2340;
    --colore-inchiostro-profondo: #12172B;
    --colore-inchiostro-chiaro: #2C3560;
    --colore-ardesia: #545A70;
    --colore-filo-grigio: #8E93A8;
    --colore-nebbia: #D5D8E3;
    --colore-lino: #F4F1EA;
    --colore-tela: #E6E0D2;
    --colore-cucitura: #D9D3C5;
    --colore-bianco: #FFFFFF;
    --colore-rosso-filo: #C2372B;
    --colore-rosso-filo-scuro: #A82E24;
    --colore-corallo: #F08A7E;
    --colore-ottone: #F2D98A;

    /* Tipografia — PROGETTO.md §6 */
    --font-titoli: 'Young Serif', Georgia, 'Times New Roman', serif;
    --font-testo: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-etichette: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --testo-display: clamp(2.75rem, 1.7rem + 4.2vw, 5.25rem);
    --testo-h2: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    --testo-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --testo-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --testo-base: 1.0625rem;
    --testo-piccolo: 0.875rem;
    --testo-etichetta: 0.75rem;

    /* Spazi — PROGETTO.md §8 */
    --spazio-1: 0.25rem;
    --spazio-2: 0.5rem;
    --spazio-3: 0.75rem;
    --spazio-4: 1rem;
    --spazio-6: 1.5rem;
    --spazio-8: 2rem;
    --spazio-12: 3rem;
    --spazio-16: 4rem;
    --spazio-24: 6rem;
    --spazio-32: 8rem;
    --spazio-sezione: clamp(4rem, 2.5rem + 6vw, 8rem);
    --margine-laterale: clamp(1.25rem, 0.5rem + 3vw, 3rem);
    --larghezza-massima: 80rem;
    --gap-griglia: clamp(1rem, 0.6rem + 1.5vw, 2rem);

    /* Movimento — PROGETTO.md §7 */
    --durata-rapida: 160ms;
    --durata-base: 320ms;
    --durata-lenta: 720ms;
    --curva-uscita: cubic-bezier(0.22, 1, 0.36, 1);
    --curva-entrata: cubic-bezier(0.64, 0, 0.78, 0);

    /* Componenti */
    --altezza-intestazione: 4rem;
    --altezza-barra-contatto: 4.5rem;
    --focus-colore: var(--colore-rosso-filo-scuro);
  }

  @media (min-width: 48em) {
    :root { --altezza-intestazione: 4.75rem; }
  }
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altezza-intestazione) + 1rem + var(--spazio-4)); /* intestazione + righello */
    scroll-padding-bottom: calc(var(--altezza-barra-contatto) + var(--spazio-4));
    background: var(--colore-inchiostro);
  }

  @media (min-width: 48em) {
    html { scroll-padding-bottom: 0; }
  }

  body {
    min-height: 100vh;
    font-family: var(--font-testo);
    font-size: var(--testo-base);
    line-height: 1.6;
    color: var(--colore-inchiostro);
    background: var(--colore-lino);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-titoli);
    font-weight: 400;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* Fondi scuri: il focus diventa Corallo */
  .tema-scuro {
    --focus-colore: var(--colore-corallo);
    color: var(--colore-lino);
    background: var(--colore-inchiostro);
  }

  :focus-visible {
    outline: 3px solid var(--focus-colore);
    outline-offset: 3px;
  }

  ::selection {
    color: var(--colore-bianco);
    background: var(--colore-rosso-filo-scuro);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* La cucitura è esclusa: la ferma hero-cucitura.js */
    *:not(.cucitura__filo-scorrimento, .cucitura__metro-scorrimento, .intestazione__filo), *::before, *:not(.intestazione__righello)::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
@layer layout {
  .contenitore {
    width: 100%;
    max-width: calc(var(--larghezza-massima) + 2 * var(--margine-laterale));
    margin-inline: auto;
    padding-inline: var(--margine-laterale);
  }
}

/* -------------------------------------------------------------------------
   Componenti
   ------------------------------------------------------------------------- */
@layer componenti {
  /* Salta al contenuto */
  .salta-contenuto {
    position: fixed;
    top: var(--spazio-2);
    left: var(--spazio-2);
    z-index: 100;
    padding: var(--spazio-3) var(--spazio-4);
    color: var(--colore-bianco);
    background: var(--colore-rosso-filo-scuro);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
  }
  .salta-contenuto:focus { transform: none; outline-color: var(--colore-ottone); }

  /* Etichetta tecnica in monospazio */
  .etichetta {
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Icone */
  .icona {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: square;
  }

  /* Bottoni */
  .bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spazio-3);
    min-height: 3.25rem;
    padding: var(--spazio-3) var(--spazio-6);
    border: 1px solid transparent;
    font-size: var(--testo-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition:
      background-color var(--durata-rapida) var(--curva-uscita),
      color var(--durata-rapida) var(--curva-uscita),
      border-color var(--durata-rapida) var(--curva-uscita);
  }
  .bottone .icona { transition: transform var(--durata-base) var(--curva-uscita); }
  .bottone:hover .icona--freccia { transform: translateX(0.25rem); }

  .bottone--primario {
    color: var(--colore-bianco);
    background: var(--colore-rosso-filo);
  }
  .bottone--primario:hover { background: var(--colore-rosso-filo-scuro); }

  .bottone--secondario {
    color: currentColor;
    border-color: currentColor;
  }
  .tema-scuro .bottone--secondario:hover {
    color: var(--colore-inchiostro);
    background: var(--colore-lino);
    border-color: var(--colore-lino);
  }

  .bottone--piccolo {
    min-height: 2.75rem;
    padding: var(--spazio-2) var(--spazio-4);
    font-size: var(--testo-piccolo);
  }

  /* Logo: etichetta cucita */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-3);
    min-height: 2.75rem;
    text-decoration: none;
  }
  .logo__segno { width: 2rem; height: 2rem; }
  .logo__fondo { fill: var(--colore-inchiostro-chiaro); }
  .logo__cucitura { stroke: var(--colore-lino); }
  .logo__punto { fill: var(--colore-rosso-filo); }
  .logo__nome {
    font-family: var(--font-titoli);
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  /* Intestazione */
  .intestazione {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--altezza-intestazione);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
      transform var(--durata-base) var(--curva-uscita),
      background-color var(--durata-base) var(--curva-uscita),
      border-color var(--durata-base) var(--curva-uscita);
  }
  .intestazione.is-scorrendo {
    background: rgb(18 23 43 / 0.94);
    border-bottom-color: var(--colore-inchiostro-chiaro);
  }
  .intestazione:has([aria-expanded='true']) { background: var(--colore-inchiostro-profondo); }

  /* Righello sotto l'intestazione, sempre visibile */
  .intestazione__righello {
    position: absolute;
    inset: 100% 0 auto;
    height: 1rem;
    background-color: var(--colore-ottone);
    background-image:
      linear-gradient(to right, var(--colore-inchiostro) 1px, transparent 1px),
      linear-gradient(to right, var(--colore-inchiostro) 1px, transparent 1px),
      linear-gradient(to right, var(--colore-inchiostro) 1.5px, transparent 1.5px);
    background-size: 10px 30%, 50px 50%, 100px 70%;
    background-repeat: repeat-x;
    box-shadow: 0 0.5rem 1rem -0.5rem rgb(0 0 0 / 0.35);
    pointer-events: none;
  }
  .intestazione:has([aria-expanded='true']) .intestazione__righello { display: none; }

  /* Punto filza rosso: avanza con lo scorrimento (solo CSS, dove è supportato) */
  .intestazione__filo {
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, var(--colore-rosso-filo) 0 1rem, transparent 1rem 1.5rem);
    clip-path: inset(0 100% 0 0);
  }
  /* L'ago: il quadratino rosso in testa al filo */
  .intestazione__righello::after {
    content: '';
    position: absolute;
    bottom: -0.1875rem;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--colore-rosso-filo);
    box-shadow: 0 0 0 2px var(--colore-inchiostro);
    opacity: 0;
  }
  @keyframes cuci-filo { to { clip-path: inset(0 0 0 0); } }
  @keyframes muovi-ago {
    from { left: 0; opacity: 1; }
    to { left: calc(100% - 0.75rem); opacity: 1; }
  }
  @supports (animation-timeline: scroll()) {
    .intestazione__filo,
    .intestazione__righello::after {
      animation: cuci-filo linear both;
      animation-timeline: scroll(root block);
    }
    .intestazione__righello::after { animation-name: muovi-ago; }
  }

  .intestazione__barra {
    display: flex;
    align-items: center;
    gap: var(--spazio-4);
    height: 100%;
  }
  .intestazione__barra .logo { margin-right: auto; }

  .intestazione__telefono,
  .intestazione__lingua {
    display: none;
    align-items: center;
    gap: var(--spazio-2);
    min-height: 2.75rem;
    padding-inline: var(--spazio-1);
    font-size: var(--testo-piccolo);
    font-weight: 500;
    text-decoration: none;
  }
  .intestazione__telefono:hover,
  .intestazione__lingua:hover { text-decoration: underline; }
  .intestazione__lingua { font-family: var(--font-etichette); letter-spacing: 0.08em; }

  .intestazione__preventivo { display: none; }

  /* Navigazione principale */
  .navigazione__bottone {
    display: none;
    align-items: center;
    gap: var(--spazio-3);
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding-inline: var(--spazio-3);
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .navigazione__linee {
    position: relative;
    width: 1.375rem;
    height: 0.625rem;
  }
  .navigazione__linee::before,
  .navigazione__linee::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--durata-base) var(--curva-uscita);
  }
  .navigazione__linee::before { top: 0; }
  .navigazione__linee::after { bottom: 0; }
  .navigazione__bottone[aria-expanded='true'] .navigazione__linee::before { transform: translateY(4px) rotate(45deg); }
  .navigazione__bottone[aria-expanded='true'] .navigazione__linee::after { transform: translateY(-4px) rotate(-45deg); }

  .navigazione__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spazio-4);
    padding: 0;
    list-style: none;
  }
  .navigazione__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--testo-piccolo);
    font-weight: 500;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left calc(100% - 0.6rem) / 0 1px no-repeat;
    transition: background-size var(--durata-base) var(--curva-uscita);
  }
  .navigazione__link:hover,
  .navigazione__link[aria-current="page"] { background-size: 100% 1px; }
  .navigazione__extra { display: none; }

  /* Menu mobile (solo con JavaScript) */
  @media (max-width: 63.99em) {
    .js .navigazione__bottone { display: inline-flex; }

    .js .navigazione__lista {
      position: fixed;
      inset: var(--altezza-intestazione) 0 0 0;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0;
      padding: var(--spazio-8) var(--margine-laterale) calc(var(--spazio-8) + env(safe-area-inset-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--colore-inchiostro-profondo);
      visibility: hidden;
      opacity: 0;
      transform: translateY(-0.75rem);
      transition:
        opacity var(--durata-base) var(--curva-uscita),
        transform var(--durata-base) var(--curva-uscita),
        visibility 0s linear var(--durata-base);
    }
    .js .navigazione__lista.is-aperta {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 0s;
    }
    .js .navigazione__lista > li { border-bottom: 1px solid var(--colore-inchiostro-chiaro); }
    .js .navigazione__link {
      width: 100%;
      min-height: 4rem;
      font-family: var(--font-titoli);
      font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
      font-weight: 400;
      background: none;
    }
    .js .navigazione__extra {
      display: flex;
      flex-direction: column;
      gap: var(--spazio-3);
      margin-top: auto;
      padding-top: var(--spazio-8);
      border-bottom: 0 !important;
    }
    .js .navigazione__extra .bottone { width: 100%; }
  }

  /* Con le voci dei servizi la barra è piena: il telefono entra solo sugli schermi larghi */
  @media (min-width: 64em) {
    .navigazione__lista { flex-wrap: nowrap; }
    .navigazione__link,
    .intestazione__preventivo { white-space: nowrap; }
  }

  @media (min-width: 80em) {
    .navigazione__lista { gap: 0 var(--spazio-6); }
    .intestazione__telefono { display: inline-flex; }
  }

  @media (min-width: 48em) {
    .intestazione__preventivo,
    .intestazione__lingua { display: inline-flex; }
  }

  /* Barra di contatto (solo mobile) */
  .barra-contatto {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spazio-2);
    padding: var(--spazio-2) var(--margine-laterale) calc(var(--spazio-2) + env(safe-area-inset-bottom));
    background: var(--colore-inchiostro-profondo);
    border-top: 1px solid var(--colore-inchiostro-chiaro);
    transition:
      transform var(--durata-base) var(--curva-uscita),
      visibility 0s linear var(--durata-base);
  }
  .barra-contatto .bottone {
    min-height: 3.25rem;
    padding-inline: var(--spazio-2);
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  .js .barra-contatto:not(.is-visibile) {
    visibility: hidden;
    transform: translateY(100%);
  }
  .js .barra-contatto.is-visibile { transition-delay: 0s; }

  @media (max-width: 47.99em) {
    body { padding-bottom: calc(var(--altezza-barra-contatto) + env(safe-area-inset-bottom)); }
  }
  @media (min-width: 48em) {
    .barra-contatto { display: none; }
  }
}

/* -------------------------------------------------------------------------
   Sezioni
   ------------------------------------------------------------------------- */
@layer sezioni {
  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--altezza-intestazione));
    margin-top: calc(-1 * var(--altezza-intestazione));
    padding-top: calc(var(--altezza-intestazione) + clamp(2.5rem, 1rem + 4vw, 4.5rem));
    overflow: hidden;
    overflow: clip;
  }

  /* Griglia da cartamodello, statica */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(to right, rgb(44 53 96 / 0.55) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(44 53 96 / 0.55) 1px, transparent 1px);
    background-size: 4rem 4rem;
    background-position: calc(50% + 2rem) 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%);
  }

  .hero__griglia {
    display: grid;
    gap: var(--spazio-12);
    align-items: center;
  }

  .hero__etichetta {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
    margin-bottom: var(--spazio-6);
    color: var(--colore-ottone);
  }
  .hero__etichetta::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    flex: none;
    align-self: flex-start;
    margin-top: 0.25em;
    background: var(--colore-rosso-filo);
  }

  .hero__titolo {
    font-size: var(--testo-display);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--colore-lino);
  }
  .hero__riga { display: block; }

  /* La parola «cucito» è cucita: punto filza rosso sotto la parola */
  .hero__cucito {
    padding-bottom: 0.06em;
    background:
      repeating-linear-gradient(90deg, var(--colore-rosso-filo) 0 0.28em, transparent 0.28em 0.46em)
      left calc(100% - 0.21em) / 100% 0.07em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero__lead {
    max-width: 38rem;
    margin-top: var(--spazio-6);
    font-size: var(--testo-lead);
    line-height: 1.5;
    color: var(--colore-nebbia);
  }

  .hero__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-3);
    margin-top: var(--spazio-8);
  }

  .hero__nota {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-1) var(--spazio-3);
    margin-top: var(--spazio-6);
    font-size: var(--testo-piccolo);
    color: var(--colore-nebbia);
  }
  .hero__nota span::before {
    content: '';
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin: 0 var(--spazio-3) 0.15em 0;
    background: var(--colore-corallo);
  }

  @media (max-width: 47.99em) {
    .hero__azioni { flex-direction: column; }
    .hero__azioni .bottone { width: 100%; }
  }
  @media (min-width: 48em) {
    .hero__nota { flex-direction: row; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-6); }
  }

  /* Cartellino «scheda misure» (solo schermi grandi) */
  .cartellino {
    display: none;
    position: relative;
    padding: var(--spazio-8) var(--spazio-6) var(--spazio-6);
    color: var(--colore-inchiostro);
    background: var(--colore-lino);
    transform: rotate(2deg);
    transform-origin: 50% 0;
    box-shadow: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.55);
  }
  /* Cucitura perimetrale tratteggiata, come nel logo */
  .cartellino::before {
    content: '';
    position: absolute;
    inset: var(--spazio-2);
    border: 1px dashed var(--colore-ardesia);
    pointer-events: none;
  }
  /* Asola del cartellino */
  .cartellino::after {
    content: '';
    position: absolute;
    top: var(--spazio-4);
    left: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: -0.375rem;
    border-radius: 50%;
    background: var(--colore-inchiostro);
    box-shadow: inset 0 0 0 2px var(--colore-cucitura);
  }

  .cartellino__intestazione {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spazio-4);
    padding-bottom: var(--spazio-3);
    border-bottom: 1px solid var(--colore-inchiostro);
  }
  .cartellino__titolo { font-family: var(--font-etichette); }
  .cartellino__stato {
    padding: 0.125rem var(--spazio-2);
    color: var(--colore-bianco);
    background: var(--colore-rosso-filo-scuro);
  }

  .cartellino__dati { margin-top: var(--spazio-2); }
  .cartellino__riga {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--spazio-4);
    padding-block: var(--spazio-3);
    border-bottom: 1px solid var(--colore-cucitura);
  }
  .cartellino__riga dt {
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colore-ardesia);
    padding-top: 0.2em;
  }
  .cartellino__riga dd {
    font-size: var(--testo-piccolo);
    font-weight: 500;
    line-height: 1.45;
  }

  .cartellino__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-2);
    min-height: 2.75rem;
    margin-top: var(--spazio-3);
    font-weight: 600;
    color: var(--colore-rosso-filo-scuro);
    text-decoration: underline;
  }

  /* Cartellino della home: primo passo del modulo */
  .cartellino__campo {
    min-width: 0;
    margin: 0;
    padding: 0 0 var(--spazio-3);
    border: 0;
    border-bottom: 1px solid var(--colore-cucitura);
  }
  /* La legenda in float si comporta come un'etichetta normale */
  .cartellino__domanda {
    float: left;
    width: 100%;
    padding: var(--spazio-3) 0 var(--spazio-2);
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colore-ardesia);
  }
  .cartellino .scelte { clear: both; gap: var(--spazio-1); margin-top: 0; }
  .cartellino .scelta { min-height: 2.25rem; padding: var(--spazio-1) var(--spazio-3); }
  .cartellino__bottone { width: 100%; margin-top: var(--spazio-4); }
  .cartellino__nota { margin-top: var(--spazio-2); font-size: var(--testo-piccolo); text-align: center; color: var(--colore-ardesia); }

  @media (min-width: 75em) {
    .hero__griglia { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--spazio-12); }
    .cartellino { display: block; }
  }

  /* ---------- La cucitura: nastro metrico + punto filza in moto lineare ---------- */
  .hero__fondo {
    margin-top: auto;
    padding-top: clamp(3rem, 2rem + 3vw, 4rem);
    /* Lo spazio che occupava il bottone di pausa, rimosso */
    padding-bottom: calc(2 * var(--spazio-4) + 2.75rem);
  }

  .cucitura {
    --passo-punto: 1.5rem;
    --passo-metro: 2000px; /* 20 numeri × 100 px */
    position: relative;
    width: 112%;
    margin-left: -6%;
    transform: rotate(-2.5deg);
    pointer-events: none;
  }

  /* Punto filza: trattini rossi */
  .cucitura__filo {
    height: 3px;
    margin-bottom: var(--spazio-4);
    overflow: hidden;
  }
  .cucitura__filo-scorrimento {
    width: calc(100% + 15rem);
    height: 100%;
    background: repeating-linear-gradient(90deg, var(--colore-rosso-filo) 0 0.875rem, transparent 0.875rem var(--passo-punto));
  }

  /* Metro da sarta */
  .cucitura__metro {
    height: clamp(3.25rem, 2.8rem + 1.5vw, 4.25rem);
    overflow: hidden;
    background: var(--colore-ottone);
    box-shadow: 0 1.25rem 2.5rem -1rem rgb(0 0 0 / 0.6);
  }
  .cucitura__metro-scorrimento {
    display: flex;
    width: max-content;
    height: 100%;
    background-image:
      linear-gradient(to right, var(--colore-inchiostro) 1px, transparent 1px),
      linear-gradient(to right, var(--colore-inchiostro) 1px, transparent 1px),
      linear-gradient(to right, var(--colore-inchiostro) 1.5px, transparent 1.5px);
    background-size: 10px 22%, 50px 36%, 100px 52%;
    background-repeat: repeat-x;
    background-position: 0 0;
  }
  .cucitura__numero {
    flex: none;
    width: 100px;
    padding: 0 0 var(--spazio-2) 4px;
    align-self: flex-end;
    font-family: var(--font-etichette);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--colore-inchiostro);
  }
  /* L'inizio del nastro: il punto in cui il metro ricomincia */
  .cucitura__numero--inizio {
    color: var(--colore-rosso-filo-scuro);
    box-shadow: inset 3px 0 0 var(--colore-rosso-filo-scuro);
  }

  /* Il moto parte solo con JavaScript attivo */
  @keyframes scorri-filo { to { transform: translateX(-15rem); } }
  @keyframes scorri-metro { to { transform: translateX(calc(-1 * var(--passo-metro))); } }

  .js .cucitura__filo-scorrimento { animation: scorri-filo 5s linear infinite; }
  .js .cucitura__metro-scorrimento { animation: scorri-metro 80s linear infinite; }
  .hero.is-ferma .cucitura__filo-scorrimento,
  .hero.is-ferma .cucitura__metro-scorrimento,
  .hero.is-fuori-schermo .cucitura__filo-scorrimento,
  .hero.is-fuori-schermo .cucitura__metro-scorrimento { animation-play-state: paused; }

  /* Entrata della hero: breve, solo transform/clip-path */
  @keyframes entra-riga {
    from { transform: translateY(105%); }
  }
  @keyframes entra-dal-basso {
    from { opacity: 0; transform: translateY(1.5rem); }
  }
  @keyframes entra-cartellino {
    from { opacity: 0; transform: rotate(-6deg) translateY(-1.5rem); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__riga { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
    .hero__riga > span { display: block; animation: entra-riga 1s var(--curva-uscita) both; }
    .hero__riga:nth-child(2) > span { animation-delay: 90ms; }
    .hero__riga:nth-child(3) > span { animation-delay: 180ms; }
    .hero__etichetta,
    .hero__lead,
    .hero__azioni,
    .hero__nota { animation: entra-dal-basso var(--durata-lenta) var(--curva-uscita) both; }
    .hero__etichetta { animation-delay: 0ms; }
    .hero__lead { animation-delay: 220ms; }
    .hero__azioni { animation-delay: 300ms; }
    .hero__nota { animation-delay: 380ms; }
    .cartellino { animation: entra-cartellino 1.2s var(--curva-uscita) 350ms both; }
    .hero__fondo { animation: entra-dal-basso 1s var(--curva-uscita) 450ms both; }
  }
}

/* -------------------------------------------------------------------------
   Pagine dei servizi e componenti condivisi (PROGETTO.md §4b)
   ------------------------------------------------------------------------- */
@layer componenti {
  /* Briciole di pane */
  .briciole { margin-bottom: var(--spazio-8); }
  .briciole__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-1) var(--spazio-2);
    padding: 0;
    list-style: none;
    font-size: var(--testo-piccolo);
    color: var(--colore-nebbia);
  }
  .briciole__voce { display: inline-flex; align-items: center; gap: var(--spazio-2); }
  .briciole__voce + .briciole__voce::before {
    content: '';
    width: 0.75rem;
    height: 1px;
    background: var(--colore-filo-grigio);
  }
  .briciole a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
  }
  .briciole a:hover { color: var(--colore-lino); }
  .briciole [aria-current='page'] { color: var(--colore-lino); }

  /* Testata di sezione */
  .sezione { padding-block: var(--spazio-sezione); }
  .sezione--tela { background: var(--colore-tela); }

  .sezione__testata {
    display: grid;
    gap: var(--spazio-4);
    max-width: 48rem;
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }
  .sezione__etichetta {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
    color: var(--colore-ardesia);
  }
  .sezione__etichetta::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    flex: none;
    background: var(--colore-rosso-filo);
  }
  .tema-scuro .sezione__etichetta { color: var(--colore-ottone); }

  .sezione__titolo {
    font-size: var(--testo-h2);
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
  .sezione__intro {
    max-width: 60ch;
    font-size: var(--testo-lead);
    line-height: 1.5;
  }
  .tema-scuro .sezione__intro { color: var(--colore-nebbia); }

  .link-freccia {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-2);
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--colore-rosso-filo-scuro);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
  .link-freccia .icona { transition: transform var(--durata-base) var(--curva-uscita); }
  .link-freccia:hover .icona { transform: translateX(0.25rem); }
  .tema-scuro .link-freccia { color: var(--colore-corallo); }

  /* Elenco con punto rosso (per chi) */
  .elenco-punti {
    display: grid;
    gap: 0 var(--gap-griglia);
    padding: 0;
    list-style: none;
  }
  .elenco-punti__voce {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spazio-4);
    padding-block: var(--spazio-6);
    border-top: 1px solid var(--colore-inchiostro);
    font-size: var(--testo-lead);
    line-height: 1.45;
  }
  .elenco-punti__voce::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.55em;
    background: var(--colore-rosso-filo);
  }
  @media (min-width: 48em) {
    .elenco-punti { grid-template-columns: 1fr 1fr; }
  }

  /* Griglia di benefici numerati */
  .benefici {
    display: grid;
    gap: var(--spazio-12) var(--gap-griglia);
    padding: 0;
    list-style: none;
    counter-reset: beneficio;
  }
  .benefici__voce {
    counter-increment: beneficio;
    padding-top: var(--spazio-6);
    border-top: 1px solid var(--colore-inchiostro);
  }
  .benefici__voce::before {
    content: counter(beneficio, decimal-leading-zero);
    display: block;
    margin-bottom: var(--spazio-4);
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
    letter-spacing: 0.12em;
    color: var(--colore-rosso-filo-scuro);
  }
  .benefici__titolo {
    margin-bottom: var(--spazio-3);
    font-size: var(--testo-h3);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  @media (min-width: 48em) { .benefici { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 75em) { .benefici--quattro { grid-template-columns: repeat(4, 1fr); } }

  /* Incluso / su misura */
  .confezione {
    display: grid;
    gap: var(--gap-griglia);
  }
  .confezione__scheda {
    position: relative;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--colore-bianco);
    border: 1px solid var(--colore-cucitura);
  }
  .confezione__scheda--misura {
    background: transparent;
    border: 1px dashed var(--colore-ardesia);
  }
  .confezione__intestazione {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spazio-4);
    padding-bottom: var(--spazio-4);
    margin-bottom: var(--spazio-2);
    border-bottom: 1px solid var(--colore-inchiostro);
  }
  .confezione__titolo { font-size: var(--testo-h3); line-height: 1.2; }
  .confezione__nota { color: var(--colore-ardesia); }
  .confezione__lista { padding: 0; list-style: none; }
  .confezione__lista li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--spazio-2);
    padding-block: var(--spazio-3);
    border-bottom: 1px solid var(--colore-cucitura);
  }
  .confezione__lista li:last-child { border-bottom: 0; }
  .confezione__lista li::before {
    content: '✓';
    font-family: var(--font-etichette);
    color: var(--colore-rosso-filo-scuro);
  }
  .confezione__scheda--misura .confezione__lista li::before { content: '+'; }
  .confezione__chiusura { margin-top: var(--spazio-8); max-width: 60ch; }
  @media (min-width: 48em) { .confezione { grid-template-columns: 1fr 1fr; } }

  /* Progetto di esempio */
  .esempio {
    display: grid;
    gap: var(--spazio-8) var(--spazio-16);
  }
  .esempio__stato { color: var(--colore-ottone); margin-bottom: var(--spazio-4); }
  .esempio__titolo {
    font-size: var(--testo-h2);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: var(--spazio-6);
  }
  .esempio__dati { display: grid; gap: var(--spazio-6); }
  .esempio__dati dt { color: var(--colore-corallo); margin-bottom: var(--spazio-1); }
  .esempio__dati dd { color: var(--colore-nebbia); max-width: 55ch; }
  .esempio__funzioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-2);
    margin-top: var(--spazio-8);
    padding: 0;
    list-style: none;
  }
  .esempio__funzioni li {
    padding: var(--spazio-1) var(--spazio-3);
    border: 1px dashed var(--colore-filo-grigio);
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colore-nebbia);
  }
  @media (min-width: 64em) { .esempio { grid-template-columns: 5fr 7fr; align-items: start; } }

  /* Domande a fisarmonica (HTML nativo) */
  .domande { border-top: 1px solid var(--colore-inchiostro); max-width: 56rem; }
  .domande__voce { border-bottom: 1px solid var(--colore-inchiostro); }
  .domande__domanda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spazio-6);
    min-height: 2.75rem;
    padding-block: var(--spazio-6);
    cursor: pointer;
    list-style: none;
  }
  .domande__domanda::-webkit-details-marker { display: none; }
  .domande__domanda h3 {
    font-size: var(--testo-h3);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .domande__segno {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }
  .domande__segno::before,
  .domande__segno::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--colore-rosso-filo);
    transition: transform var(--durata-base) var(--curva-uscita);
  }
  .domande__segno::after { transform: rotate(90deg); }
  .domande__voce[open] .domande__segno::after { transform: rotate(0deg); }
  .domande__domanda:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .domande__risposta {
    max-width: 65ch;
    padding-bottom: var(--spazio-8);
  }
  .domande__risposta p + p { margin-top: var(--spazio-3); }

  /* Invito finale */
  .richiesta {
    display: grid;
    gap: var(--spazio-12) var(--spazio-16);
  }
  .richiesta__titolo {
    font-size: var(--testo-h2);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: var(--spazio-6);
  }
  .richiesta__testo { color: var(--colore-nebbia); font-size: var(--testo-lead); line-height: 1.5; max-width: 50ch; }
  .richiesta__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-3); margin-top: var(--spazio-8); }
  .richiesta__contatti { display: grid; gap: var(--spazio-6); align-content: start; }
  .richiesta__contatti dt { color: var(--colore-ottone); margin-bottom: var(--spazio-1); }
  .richiesta__contatti a { font-family: var(--font-titoli); font-size: var(--testo-h3); text-decoration: underline; text-decoration-thickness: 1px; }
  .richiesta__contatti dd + dd { color: var(--colore-nebbia); font-size: var(--testo-piccolo); }
  .altri-servizi { margin-top: var(--spazio-16); padding-top: var(--spazio-8); border-top: 1px solid var(--colore-inchiostro-chiaro); grid-column: 1 / -1; }
  .altri-servizi__titolo { color: var(--colore-ottone); margin-bottom: var(--spazio-4); }
  .altri-servizi__lista { display: grid; gap: var(--spazio-2) var(--gap-griglia); padding: 0; list-style: none; }
  .altri-servizi__lista a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spazio-4);
    min-height: 3.5rem;
    padding-block: var(--spazio-3);
    border-bottom: 1px solid var(--colore-inchiostro-chiaro);
    font-family: var(--font-titoli);
    font-size: var(--testo-h3);
    text-decoration: none;
  }
  .altri-servizi__lista a:hover { color: var(--colore-corallo); }
  @media (max-width: 47.99em) {
    .richiesta__azioni { flex-direction: column; }
    .richiesta__azioni .bottone { width: 100%; }
  }
  @media (min-width: 48em) { .altri-servizi__lista { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .richiesta { grid-template-columns: 7fr 5fr; } }

  /* Piè di pagina */
  .piede {
    padding-block: var(--spazio-16) var(--spazio-8);
    background: var(--colore-inchiostro-profondo);
  }
  .piede__griglia {
    display: grid;
    gap: var(--spazio-12) var(--gap-griglia);
  }
  .piede__frase { max-width: 32ch; margin-top: var(--spazio-4); color: var(--colore-nebbia); }
  .piede__titolo { color: var(--colore-ottone); margin-bottom: var(--spazio-3); }
  .piede__lista { padding: 0; list-style: none; }
  .piede__lista a, .piede__lista span {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--colore-nebbia);
    text-decoration: none;
  }
  .piede__lista a:hover { color: var(--colore-lino); text-decoration: underline; }
  .piede__legale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-1) var(--spazio-6);
    margin-top: var(--spazio-16);
    padding-top: var(--spazio-6);
    border-top: 1px solid var(--colore-inchiostro-chiaro);
    font-size: var(--testo-piccolo);
    color: var(--colore-nebbia);
  }
  .piede__legale a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  @media (min-width: 48em) { .piede__griglia { grid-template-columns: 2fr 1fr 1fr 1fr; } }
}

@layer sezioni {
  /* Hero delle pagine servizio: più compatta della home */
  .hero--servizio { min-height: auto; }
  .hero--servizio .hero__griglia { align-items: end; }

  /* Comparsa allo scroll: attiva solo se rivela.js è partito (classe sull'html) */
  @media (prefers-reduced-motion: no-preference) {
    .rivela-attivo [data-rivela] {
      opacity: 0;
      transform: translateY(1.5rem);
      transition:
        opacity var(--durata-lenta) var(--curva-uscita),
        transform var(--durata-lenta) var(--curva-uscita);
      transition-delay: calc(var(--ritardo, 0) * 80ms);
    }
    .rivela-attivo [data-rivela].is-visibile { opacity: 1; transform: none; }
  }
}

/* -------------------------------------------------------------------------
   Home: servizi
   ------------------------------------------------------------------------- */
@layer sezioni {
  .problemi__chiusura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spazio-1) var(--spazio-4);
    margin-top: var(--spazio-8);
    font-size: var(--testo-lead);
  }

  /* ---------- servizi: una card per servizio ---------- */
  .servizi {
    display: grid;
    gap: var(--gap-griglia);
    padding: 0;
    list-style: none;
  }
  .servizio {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-3);
    height: 100%;
    padding: var(--spazio-6);
    background: var(--colore-lino);
    border: 1px solid var(--colore-inchiostro);
    text-decoration: none;
    transition: border-color var(--durata-rapida), box-shadow var(--durata-rapida);
  }
  .servizio:hover {
    border-color: var(--colore-rosso-filo-scuro);
    box-shadow: inset 0 0 0 1px var(--colore-rosso-filo-scuro);
  }
  .servizio__numero { color: var(--colore-rosso-filo-scuro); }
  .servizio__titolo {
    font-size: var(--testo-h3);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .servizio__freccia {
    margin-top: auto;
    color: var(--colore-rosso-filo-scuro);
    transition: transform var(--durata-base) var(--curva-uscita);
  }
  .servizio:hover .servizio__freccia { transform: translateX(0.25rem); }

  @media (min-width: 48em) { .servizi { grid-template-columns: repeat(3, 1fr); } }
}

/* -------------------------------------------------------------------------
   Home: campionario e metodo
   ------------------------------------------------------------------------- */
@layer sezioni {
  /* ---------- campionario: una card per progetto ---------- */
  .campionario {
    display: grid;
    gap: var(--gap-griglia);
    padding: 0;
    list-style: none;
  }
  .progetto {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--colore-bianco);
    border: 1px solid var(--colore-inchiostro);
    text-decoration: none;
    transition: border-color var(--durata-rapida), box-shadow var(--durata-rapida);
  }
  .progetto:hover {
    border-color: var(--colore-rosso-filo-scuro);
    box-shadow: inset 0 0 0 1px var(--colore-rosso-filo-scuro);
  }
  .progetto .anteprima { border: 0; border-bottom: 1px solid var(--colore-cucitura); box-shadow: none; }
  .progetto .anteprima::before { display: none; }
  .progetto__testo {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--spazio-3);
    padding: var(--spazio-6);
  }
  .progetto__tipo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-3); color: var(--colore-ardesia); }
  .progetto__stato {
    padding: 0.125rem var(--spazio-2);
    border: 1px dashed var(--colore-ardesia);
    color: var(--colore-inchiostro);
  }
  .progetto__titolo {
    font-size: var(--testo-h3);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .progetto__freccia {
    margin-top: auto;
    color: var(--colore-rosso-filo-scuro);
    transition: transform var(--durata-base) var(--curva-uscita);
  }
  .progetto:hover .progetto__freccia { transform: translateX(0.25rem); }

  /* Su telefono l'anteprima allunga troppo la pagina: resta solo il testo */
  @media (max-width: 47.99em) { .progetto .anteprima { display: none; } }
  @media (min-width: 48em) { .campionario { grid-template-columns: repeat(3, 1fr); } }

  /* Anteprima schematica: solo blocchi, nessuna immagine */
  .anteprima {
    position: relative;
    background: var(--colore-bianco);
    border: 1px solid var(--colore-inchiostro);
    box-shadow: 0 1.5rem 3rem -1.5rem rgb(28 35 64 / 0.35);
  }
  .anteprima::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px dashed var(--colore-ardesia);
    transform: translate(0.75rem, 0.75rem);
  }
  .anteprima__barra {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--spazio-2) var(--spazio-3);
    border-bottom: 1px solid var(--colore-cucitura);
    background: var(--colore-lino);
  }
  .anteprima__barra > span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--colore-cucitura); }
  .anteprima__barra > span:first-child { background: var(--colore-rosso-filo); }
  .anteprima__indirizzo {
    margin-left: var(--spazio-3);
    font-family: var(--font-etichette);
    font-size: 0.6875rem;
    color: var(--colore-ardesia);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .anteprima__corpo { aspect-ratio: 16 / 10; padding: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem); overflow: hidden; }
  .anteprima i, .anteprima b { display: block; }

  .ap-riga, .ap-testo, .ap-titolo, .ap-bottone, .ap-campo, .ap-cerca { height: 0.5rem; background: var(--colore-nebbia); }
  .ap-titolo { width: 40%; height: 0.875rem; background: var(--colore-inchiostro); }
  .ap-titolo--grande { width: 70%; height: 1.375rem; }
  .ap-testo { width: 85%; margin-top: 0.5rem; }
  .ap-testo--corto { width: 55%; }
  .ap-bottone { width: 5.5rem; height: 1.5rem; background: var(--colore-rosso-filo); }
  .ap-bottone--largo { width: 100%; margin-top: var(--spazio-4); }
  .ap-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spazio-4); }
  .ap-cerca { width: 35%; height: 1.5rem; background: transparent; border: 1px solid var(--colore-nebbia); }

  .ap-app { display: grid; grid-template-columns: 22% 1fr; gap: var(--spazio-4); height: 100%; }
  .ap-app__lato { display: grid; align-content: start; gap: 0.625rem; padding: var(--spazio-3); background: var(--colore-inchiostro); }
  .ap-app__lato .ap-riga { background: var(--colore-inchiostro-chiaro); }
  .ap-app__lato .ap-riga--attiva { background: var(--colore-ottone); }
  .ap-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.25rem; height: calc(100% - 2.5rem); }
  .ap-cal__cella { background: var(--colore-lino); }
  .ap-cal__cella--a { background: var(--colore-rosso-filo); }
  .ap-cal__cella--b { background: var(--colore-inchiostro); }
  .ap-cal__cella--c { background: var(--colore-ottone); }

  .ap-sito { max-width: 26rem; margin-inline: auto; }
  .ap-passi { display: flex; align-items: center; gap: var(--spazio-2); margin-block: var(--spazio-6) var(--spazio-4); }
  .ap-passi b {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border: 1px solid var(--colore-inchiostro);
    font-family: var(--font-etichette);
    font-size: 0.6875rem;
    font-weight: 500;
  }
  .ap-passi b.is-fatto { color: var(--colore-lino); background: var(--colore-inchiostro); }
  .ap-passi b.is-attivo { color: var(--colore-bianco); background: var(--colore-rosso-filo); border-color: var(--colore-rosso-filo); }
  .ap-passi i { flex: 1; height: 0; border-top: 1px dashed var(--colore-ardesia); }
  .ap-campi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-2); }
  .ap-campo { height: 1.75rem; background: transparent; border: 1px solid var(--colore-nebbia); }
  .ap-campo--foto { border-style: dashed; border-color: var(--colore-ardesia); background: var(--colore-lino); }

  .ap-tab__riga {
    display: grid;
    grid-template-columns: 1.75rem 1fr 3.5rem 2.25rem;
    gap: var(--spazio-3);
    align-items: center;
    padding-block: 0.4rem;
    border-bottom: 1px solid var(--colore-lino);
  }
  .ap-tab__riga .ap-testo { margin: 0; }
  .ap-tab__img { height: 1.75rem; background: var(--colore-tela); }
  .ap-tab__prezzo { height: 0.5rem; background: var(--colore-inchiostro); }
  .ap-tab__qta { height: 1.25rem; border: 1px solid var(--colore-nebbia); }
  .ap-cat__totale { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spazio-4); }
  .ap-cat__totale .ap-testo { width: 30%; margin: 0; }

  /* ---------- metodo: quattro passaggi cuciti ---------- */
  .metodo {
    position: relative;
    display: grid;
    gap: var(--spazio-8);
    padding: 0 0 0 var(--spazio-8);
    list-style: none;
  }
  /* La cucitura che unisce i passaggi */
  .metodo::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 0.4375rem;
    border-left: 2px dashed var(--colore-rosso-filo);
  }
  .passo { position: relative; }
  .passo::before {
    content: '';
    position: absolute;
    top: 1.125rem;
    left: calc(-1 * var(--spazio-8));
    width: 1rem;
    height: 1rem;
    background: var(--colore-rosso-filo);
    box-shadow: 0 0 0 4px var(--colore-inchiostro);
  }
  .passo__numero {
    font-family: var(--font-titoli);
    font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
    line-height: 1;
    color: var(--colore-ottone);
  }
  .passo__titolo { margin-top: var(--spazio-4); font-size: var(--testo-h3); line-height: 1.2; }
  .passo__testo { margin-top: var(--spazio-2); color: var(--colore-nebbia); max-width: 48ch; }
  .metodo__chiusura { color: var(--colore-lino); }

  @media (min-width: 64em) {
    .metodo { grid-template-columns: repeat(4, 1fr); gap: var(--gap-griglia); padding: var(--spazio-8) 0 0; }
    .metodo::before { top: 0.4375rem; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 2px dashed var(--colore-rosso-filo); }
    .passo::before { top: calc(-1 * var(--spazio-8)); left: 0; }
  }
}

/* -------------------------------------------------------------------------
   Contatti e modulo (PROGETTO.md §10-11)
   ------------------------------------------------------------------------- */
@layer componenti {
  .contatti__griglia {
    display: grid;
    gap: var(--spazio-12) var(--spazio-16);
    align-items: start;
  }
  .contatti__diretti { margin-top: var(--spazio-12); }
  .contatti__testo .sezione__etichetta,
  .richiesta .sezione__etichetta,
  .esempio .sezione__etichetta { margin-bottom: var(--spazio-4); }
  @media (min-width: 64em) {
    .contatti__griglia { grid-template-columns: 5fr 7fr; }
    .contatti__testo { position: sticky; top: calc(var(--altezza-intestazione) + var(--spazio-8)); }
  }

  /* La scheda del modulo: lino, con cucitura perimetrale */
  .modulo {
    --focus-colore: var(--colore-rosso-filo-scuro);
    position: relative;
    display: grid;
    gap: var(--spazio-6);
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    color: var(--colore-inchiostro);
    background: var(--colore-lino);
  }
  .modulo::before {
    content: '';
    position: absolute;
    inset: var(--spazio-2);
    border: 1px dashed var(--colore-ardesia);
    pointer-events: none;
  }
  .modulo[hidden] { display: none; }
  .tema-scuro .modulo .sezione__etichetta { color: var(--colore-inchiostro); }
  .modulo__titolo { font-size: var(--testo-h3); line-height: 1.2; }
  .modulo__nota { margin-top: calc(-1 * var(--spazio-4)); font-size: var(--testo-piccolo); }

  /* Passi del modulo: con JavaScript se ne vede uno alla volta */
  .modulo__passo { display: grid; gap: var(--spazio-6); min-width: 0; margin: 0; padding: 0; border: 0; }
  .modulo__passo[hidden] { display: none; }
  .modulo__passo:focus { outline: none; }
  .modulo__passo:focus-visible .modulo__passo-titolo { outline: 3px solid var(--focus-colore); outline-offset: 4px; }
  .modulo__passo-titolo {
    padding: var(--spazio-6) 0 0;
    font-family: var(--font-titoli);
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: var(--spazio-2);
  }
  .is-a-passi .modulo__passo-titolo { padding-top: 0; }
  .modulo__contatore { display: block; margin-bottom: var(--spazio-2); color: var(--colore-rosso-filo-scuro); }

  .modulo__avanzamento {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--spazio-1);
    margin: calc(-1 * var(--spazio-2)) 0 0;
    padding: 0;
    list-style: none;
  }
  .modulo__avanzamento[hidden] { display: none; }
  .modulo__avanzamento li { height: 0.25rem; background: var(--colore-cucitura); transition: background-color var(--durata-base); }
  .modulo__avanzamento li.is-fatta { background: var(--colore-rosso-filo); }

  .modulo__comandi { display: flex; flex-wrap: wrap; gap: var(--spazio-3); }
  .modulo__comandi[hidden], .modulo__comandi [hidden], .modulo__invio[hidden] { display: none; }
  .modulo__comandi [data-js="avanti"] { margin-left: auto; }
  @media (max-width: 47.99em) { .modulo__comandi .bottone { flex: 1 1 auto; } }

  /* «Altro…»: con JavaScript il campo compare solo se scelto */
  .campo__altro { margin-top: var(--spazio-3); }
  .js .campo__altro:not(.is-visibile) { display: none; }

  .modulo__coppia { display: grid; gap: var(--spazio-6); }
  @media (min-width: 40em) { .modulo__coppia { grid-template-columns: 1fr 1fr; } }

  .campo { display: grid; gap: var(--spazio-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .campo__etichetta { padding: 0; font-weight: 600; line-height: 1.35; }
  .campo__obbligo { font-weight: 400; font-size: var(--testo-piccolo); }
  .campo__aiuto { font-size: var(--testo-piccolo); }

  .campo__input {
    width: 100%;
    min-height: 3.25rem;
    padding: var(--spazio-3) var(--spazio-4);
    border: 1px solid var(--colore-ardesia);
    border-radius: 0;
    background: var(--colore-bianco);
    color: var(--colore-inchiostro);
    font-size: var(--testo-base); /* ≥ 16 px: iOS non ingrandisce la pagina */
    transition: border-color var(--durata-rapida);
  }
  .campo__input:hover { border-color: var(--colore-inchiostro); }
  .campo__input:focus-visible { outline-offset: 0; border-color: var(--colore-inchiostro); }
  .campo__input--area { min-height: 9rem; resize: vertical; line-height: 1.5; }
  .campo__input[aria-invalid='true'] { border: 2px solid var(--colore-rosso-filo-scuro); }

  .campo__errore {
    display: flex;
    gap: var(--spazio-2);
    font-size: var(--testo-piccolo);
    font-weight: 600;
    color: var(--colore-rosso-filo-scuro);
  }
  .campo__errore[hidden] { display: none; }
  .campo__errore > span:first-child {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--colore-bianco);
    background: var(--colore-rosso-filo-scuro);
    font-family: var(--font-etichette);
    font-size: var(--testo-etichetta);
  }

  /* Scelte a pulsante: radio nativi, stilizzati */
  .scelte { display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin-top: var(--spazio-1); }
  .scelta {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-2);
    min-height: 2.75rem;
    padding: var(--spazio-2) var(--spazio-4);
    border: 1px solid var(--colore-ardesia);
    background: var(--colore-bianco);
    font-size: var(--testo-piccolo);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--durata-rapida), color var(--durata-rapida);
  }
  .scelta input {
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    flex: none;
    border: 1px solid currentColor;
    border-radius: 50%;
  }
  .scelta input[type='checkbox'] { border-radius: 0; }
  .scelta input:checked { background: var(--colore-rosso-filo); border-color: var(--colore-lino); box-shadow: 0 0 0 1px var(--colore-rosso-filo); }
  .scelta:hover { border-color: var(--colore-inchiostro); }
  .scelta:has(input:checked) { color: var(--colore-lino); background: var(--colore-inchiostro); border-color: var(--colore-inchiostro); }
  .scelta input:focus-visible { outline: none; }
  .scelta:has(input:focus-visible) { outline: 3px solid var(--focus-colore); outline-offset: 3px; }

  /* Consenso */
  .consenso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spazio-3);
    font-size: var(--testo-piccolo);
    line-height: 1.5;
    cursor: pointer;
  }
  .consenso input {
    appearance: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border: 1px solid var(--colore-ardesia);
    background: var(--colore-bianco);
  }
  .consenso input::after {
    content: '';
    width: 0.75rem;
    height: 0.375rem;
    margin-top: -0.2rem;
    border-left: 2px solid var(--colore-lino);
    border-bottom: 2px solid var(--colore-lino);
    transform: rotate(-45deg) scale(0);
    transition: transform var(--durata-rapida) var(--curva-uscita);
  }
  .consenso input:checked { background: var(--colore-inchiostro); border-color: var(--colore-inchiostro); }
  .consenso input:checked::after { transform: rotate(-45deg) scale(1); }
  .consenso input[aria-invalid='true'] { border: 2px solid var(--colore-rosso-filo-scuro); }
  .consenso a { color: var(--colore-inchiostro); text-decoration-thickness: 2px; }

  .modulo__invio { display: grid; gap: var(--spazio-3); justify-items: start; }
  .modulo__invio .bottone:disabled { cursor: progress; opacity: 0.75; }
  .modulo__rassicurazione { font-size: var(--testo-piccolo); }
  @media (max-width: 47.99em) { .modulo__invio .bottone { width: 100%; } }

  /* Riepilogo errori ed esiti */
  .modulo__riepilogo,
  .modulo__esito--errore {
    padding: var(--spazio-4) var(--spazio-6);
    border-left: 4px solid var(--colore-rosso-filo-scuro);
    background: var(--colore-bianco);
  }
  .modulo__riepilogo[hidden], .modulo__esito[hidden] { display: none; }
  .modulo__riepilogo-titolo, .modulo__esito-titolo { font-weight: 700; margin-bottom: var(--spazio-2); }
  .modulo__riepilogo ul { padding-left: var(--spazio-6); }
  .modulo__riepilogo a, .modulo__esito a { color: var(--colore-rosso-filo-scuro); }
  .modulo__esito:focus-visible, .modulo__riepilogo:focus-visible { outline-offset: 2px; }
}

/* -------------------------------------------------------------------------
   Pagine di testo: privacy, accessibilità, 404
   ------------------------------------------------------------------------- */
@layer sezioni {
  .hero--pagina { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
  .hero--pagina .hero__titolo { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem); }
}

@layer componenti {
  .documento { max-width: 46rem; }
  .documento > * + * { margin-top: var(--spazio-4); }
  .documento h2 {
    margin-top: var(--spazio-12);
    padding-top: var(--spazio-6);
    border-top: 1px solid var(--colore-inchiostro);
    font-size: var(--testo-h3);
    line-height: 1.2;
  }
  .documento h3 { margin-top: var(--spazio-8); font-family: var(--font-testo); font-size: var(--testo-base); font-weight: 700; }
  .documento ul { padding-left: var(--spazio-6); }
  .documento li + li { margin-top: var(--spazio-2); }
  .documento a { color: var(--colore-rosso-filo-scuro); text-decoration: underline; }
  .documento__data { font-size: var(--testo-piccolo); }

  .documento__avviso {
    padding: var(--spazio-4) var(--spazio-6);
    border: 1px dashed var(--colore-rosso-filo-scuro);
    background: var(--colore-bianco);
  }
  .documento__avviso .etichetta { color: var(--colore-rosso-filo-scuro); margin-bottom: var(--spazio-1); }

  .documento__tabella { border-top: 1px solid var(--colore-cucitura); }
  .documento__tabella > div {
    display: grid;
    gap: var(--spazio-1) var(--spazio-6);
    padding-block: var(--spazio-4);
    border-bottom: 1px solid var(--colore-cucitura);
  }
  .documento__tabella dt { font-weight: 600; }
  @media (min-width: 48em) { .documento__tabella > div { grid-template-columns: 1fr 1fr; } }

  .documento__link { display: grid; gap: var(--spazio-2); margin-top: var(--spazio-4); padding: 0; list-style: none; }
}

/* -------------------------------------------------------------------------
   Utilità e preferenze di accessibilità
   ------------------------------------------------------------------------- */
@layer utilita {
  .visivamente-nascosto {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  @media (prefers-contrast: more) {
    .hero__lead, .hero__nota { color: var(--colore-lino); }
    .hero::before { display: none; }
  }

  @media (forced-colors: active) {
    .bottone { border-color: ButtonText; }
    .cartellino::before { border-color: CanvasText; }
    .hero__cucito { text-decoration: underline dashed; background: none; }
    .cucitura { display: none; }
    .scelta input, .consenso input { appearance: auto; }
  }
}