/* ==========================================================================
   DearCove — Landing MVP
   Palette e tipografia ricavate dal mockup di brand.
   ========================================================================== */

/* ==========================================================================
   DearCove — Griglia e utility
   --------------------------------------------------------------------------
   Sostituisce Bootstrap. Il progetto ne usava 42 classi in tutto — contenitore,
   griglia a colonne, qualche flex e le spaziature — a fronte di 230 KB scaricati
   da un CDN esterno a ogni prima visita.

   Quel CDN riceve l'indirizzo IP di chi apre il sito, esattamente come faceva
   Google Fonts: un terzo soggetto in più nell'informativa privacy, in cambio di
   nulla. Queste centoventi righe fanno lo stesso lavoro, stanno nel foglio di
   stile che già scarichiamo e tolgono una richiesta di rete.

   Le misure sono identiche a quelle di Bootstrap 5, così il resto del CSS —
   scritto pensando a quelle — continua a funzionare senza ritocchi:
   punti di rottura 576/768/992/1200/1400, gutter 1.5rem, scala delle
   spaziature 0 · .25 · .5 · 1 · 1.5 · 3 rem.
   ========================================================================== */

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

/* ------------------------------------------------------------ Contenitore */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: .75rem;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ---------------------------------------------------------------- Griglia */

.row {
  --gx: 1.5rem;
  --gy: 0rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gy));
  margin-inline: calc(-.5 * var(--gx));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--gy);
  padding-inline: calc(.5 * var(--gx));
}

.g-4  { --gx: 1.5rem; --gy: 1.5rem; }
.g-5  { --gx: 3rem;   --gy: 3rem; }
.gy-4 { --gy: 1.5rem; }

/* Una riga dentro una colonna non può avere una gronda più larga di quella
   che la colonna le mette a disposizione: `.row` sporge di metà gronda per
   lato, e la colonna che la contiene ha 12px di padding. Con `.g-5` (24px)
   la riga sborda di 12px per lato. Sul desktop finisce dentro il padding del
   contenitore e non si vede; su telefono diventava scorrimento orizzontale
   di tutta la pagina — la correzione è più sotto, nel blocco mobile, per non
   toccare le spaziature del desktop dove il difetto è invisibile. */

/* Le colonne usate nel progetto. Aggiungerne altre è una riga per ciascuna. */
.col-6  { width: 50%; }

@media (min-width: 768px) {
  .col-md-4 { width: 33.333333%; }
  .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-2  { width: 16.666667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.333333%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.333333%; }
}
@media (min-width: 1200px) {
  .col-xl-6 { width: 50%; }
  .col-xl-8 { width: 66.666667%; }
  .col-xl-9 { width: 75%; }
}

/* ------------------------------------------------------- Flex e visibilità */

.d-flex   { display: flex; }
.d-none   { display: none; }
.d-block  { display: block; }

@media (min-width: 992px) {
  .d-lg-flex   { display: flex; }
  .d-lg-inline { display: inline; }
  .d-lg-none   { display: none; }
}

.flex-wrap  { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-basis-0 { flex-basis: 0; }

.align-items-center  { align-items: center; }
.align-items-end     { align-items: flex-end; }

.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }

.gap-2 { gap: .5rem; }
.gap-4 { gap: 1.5rem; }

/* ------------------------------------------------------------- Spaziature */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.my-4 { margin-block: 1.5rem; }

.pb-2 { padding-bottom: .5rem; }
.pb-3 { padding-bottom: 1rem; }
.pt-2 { padding-top: .5rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

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

.text-center { text-align: center; }
.fst-italic  { font-style: italic; }

:root {
  /* Colori */
  --dc-ink:        #1a1a1a;   /* testo principale, quasi nero */
  --dc-ink-soft:   #4a443d;   /* testo secondario */
  --dc-muted:      #8a8078;   /* testo tenue, corsivi EN */
  --dc-line:       #e2dbd1;   /* bordi e separatori */
  --dc-bg:         #fdfbf8;   /* sfondo pagina, bianco caldo */
  --dc-bg-alt:     #f6f2ec;   /* sezioni alternate */
  --dc-bg-warm:    #ece5db;   /* fasce calde */
  --dc-accent:     #9a805f;   /* oro/taupe del logo */
  --dc-accent-dk:  #7a6547;
  --dc-btn:        #141414;
  --dc-btn-hover:  #2e2a26;

  /* Tipografia */
  --dc-serif: "Cormorant Garamond", "Times New Roman", serif;
  --dc-sans:  "Lato", -apple-system, "Segoe UI", sans-serif;

  /* Misure */
  --dc-radius: 2px;
  --dc-shadow: 0 18px 50px rgba(60, 48, 36, .10);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--dc-bg);
  color: var(--dc-ink);
  font-family: var(--dc-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .dc-serif {
  font-family: var(--dc-serif);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.15;

  /* Titoli: il browser distribuisce le parole fra le righe invece di
     riempire la prima e lasciare una parola sola sull'ultima. È il difetto
     che si nota di più su un titolo grande, e cambia a ogni larghezza —
     motivo per cui non si risolve con un <br> a mano, che sarebbe giusto su
     un telefono e sbagliato su tutti gli altri. */
  text-wrap: balance;
}

/* Nel corpo del testo l'obiettivo è diverso: non bilanciare le righe, ma
   evitare che l'ultima contenga una parola sola. `pretty` fa questo e basta,
   senza toccare il resto del paragrafo.
   Entrambe le proprietà sono migliorie progressive: dove non sono supportate
   il testo va a capo come prima, senza rompere niente. */
p, li, figcaption, dd, blockquote {
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--dc-accent); }

::selection { background: var(--dc-bg-warm); }

.dc-eyebrow {
  font-family: var(--dc-sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dc-accent-dk);
}

.dc-rule {
  width: 56px;
  height: 1px;
  background: var(--dc-line);
  border: 0;
  opacity: 1;
  margin: 1.75rem 0;
}
.dc-rule--center { margin-inline: auto; }

.dc-section { padding: 5.5rem 0; }
.dc-section--alt  { background: var(--dc-bg-alt); }
.dc-section--warm { background: var(--dc-bg-warm); }

.dc-section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom: .5rem;
}

/* Bottoni */
.dc-btn {
  display: inline-block;
  background: var(--dc-btn);
  color: #fff;
  border: 1px solid var(--dc-btn);
  border-radius: var(--dc-radius);
  padding: .95rem 2rem;
  font-family: var(--dc-sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.dc-btn:hover:not(:disabled) { background: var(--dc-btn-hover); border-color: var(--dc-btn-hover); color: #fff; }
.dc-btn:disabled { opacity: .35; cursor: not-allowed; }

.dc-btn--ghost {
  background: transparent;
  color: var(--dc-ink);
  border-color: var(--dc-line);
}
.dc-btn--ghost:hover:not(:disabled) { background: transparent; color: var(--dc-accent); border-color: var(--dc-accent); }

.dc-btn--link {
  background: none; border: 0; padding: .5rem 0;
  color: var(--dc-muted);
  text-transform: none; letter-spacing: .04em; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.dc-btn--link:hover { color: var(--dc-ink); background: none; }

/* -------------------------------------------------------------- Logo --- */

.dc-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--dc-ink); }
.dc-logo:hover { color: var(--dc-ink); }

.dc-logo__mark {
  display: block;         /* mai lasciarlo inline: la width verrebbe ignorata */
  width: 62px;
  color: var(--dc-accent);
  margin-bottom: .15rem;
  transition: width .3s ease, margin-bottom .3s ease, opacity .3s ease;
}
.dc-logo__mark svg,
.dc-logo__mark img { width: 100%; height: auto; display: block; }

/* Filetto con pallino centrale, come nel logo ufficiale */
.dc-logo__divider {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin: .55rem 0 .35rem;
}
.dc-logo__divider::before,
.dc-logo__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--dc-line);
}
.dc-logo__divider span {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--dc-accent);
  flex: 0 0 auto;
}

.dc-logo__word {
  font-family: var(--dc-serif);
  font-weight: 400;
  font-size: 2.1rem;
  letter-spacing: .015em;
  transition: font-size .3s ease;
}
.dc-logo__tag {
  font-family: var(--dc-serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--dc-ink-soft);
  margin-top: .15rem;
}
.dc-logo__sub {
  font-family: var(--dc-sans);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dc-muted);
  width: 100%;
  text-align: center;
}

.dc-logo--start { align-items: flex-start; }
.dc-logo--start .dc-logo__sub { text-align: left; }

.flex-basis-0 { flex-basis: 0; }

.dc-logo--sm .dc-logo__word { font-size: 1.35rem; }
.dc-logo--sm .dc-logo__mark { width: 18px; }
.dc-logo--sm .dc-logo__tag { font-size: .72rem; }
.dc-logo--sm .dc-logo__sub { font-size: .5rem; }

/* ------------------------------------------------------------ Header --- */

/* position: fixed e non sticky. Vedi la spiegazione in assets/js/header.js:
   con sticky l'header resta nel flusso, e rimpicciolendosi faceva salire
   tutto il contenuto — da lì lo sfarfallio. Fisso non sposta più niente e
   il distanziatore qui sotto tiene l'altezza costante. */
.dc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  /* Tinta piena invece di backdrop-filter: la sfocatura va ricalcolata a
     ogni fotogramma di scroll ed è una delle voci più care su portatili
     senza scheda dedicata. La differenza a occhio è minima. */
  background: #fcfaf7;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.dc-header.is-stuck { border-bottom-color: var(--dc-line); box-shadow: 0 4px 24px rgba(60,48,36,.05); }

/* Occupa lo spazio dell'header esteso. L'altezza la fissa header.js dopo
   aver misurato, e non cambia più: è questo che spezza l'anello. */
.dc-header-spacer { height: 0; }

/* Gli ancoraggi non devono finire sotto all'header fisso */
section[id], [id="top"] { scroll-margin-top: 92px; }

.dc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0 1.1rem;
  transition: padding .3s ease;
}

/* Logo compatto allo scroll: resta solo il lettering, in linea con il menu. */
.dc-header.is-stuck .dc-header__inner { padding: .5rem 0; }
.dc-header.is-stuck .dc-logo__word { font-size: 1.4rem; }
.dc-header.is-stuck .dc-logo__mark { width: 0; margin-bottom: 0; opacity: 0; }
.dc-header.is-stuck .dc-logo__tag,
.dc-header.is-stuck .dc-logo__sub,
.dc-header.is-stuck .dc-logo__divider { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; }

.dc-header .dc-logo__tag,
.dc-header .dc-logo__sub,
.dc-header .dc-logo__divider {
  overflow: hidden;
  max-height: 2rem;
  transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}

/* Sotto i 992px il menu orizzontale sparisce e il logo resta solo a
   sinistra: nella forma estesa si mangiava un quinto dello schermo prima
   ancora che iniziasse la pagina. Su mobile va in forma compatta, la stessa
   che assume allo scroll. */
@media (max-width: 991.98px) {
  .dc-header__inner { padding: .7rem 0; }
  .dc-header .dc-logo__mark { width: 30px; margin-bottom: .1rem; }
  .dc-header .dc-logo__word { font-size: 1.45rem; }
  .dc-header .dc-logo__tag,
  .dc-header .dc-logo__sub,
  .dc-header .dc-logo__divider { display: none; }
}

.dc-nav__link {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--dc-ink-soft);
  padding: .5rem .25rem;
}
.dc-nav__link:hover { color: var(--dc-accent); }

/* Selettore lingua */
.dc-lang { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .12em; }
.dc-lang button {
  background: none; border: 0; padding: .15rem .1rem;
  color: var(--dc-muted); font: inherit; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.dc-lang button:hover { color: var(--dc-ink); }
.dc-lang button.is-active { color: var(--dc-ink); border-bottom-color: var(--dc-accent); }
.dc-lang span { color: var(--dc-line); }

/* Menu mobile */
.dc-burger { background: none; border: 0; padding: .5rem; color: var(--dc-ink); }
.dc-burger svg { width: 22px; height: 22px; }

.dc-mobile-nav {
  display: none;
  border-top: 1px solid var(--dc-line);
  padding: 1rem 0 1.25rem;
}
.dc-mobile-nav.is-open { display: block; }
.dc-mobile-nav a { display: block; padding: .6rem 0; font-size: .95rem; }

/* -------------------------------------------------------------- Hero --- */

/* La fotografia occupa tutta la fascia; il testo sta a sinistra, dove
   l'immagine ha volutamente dello spazio vuoto. Su schermi stretti
   l'inquadratura si sposta verso destra, così la borsa resta in campo e il
   testo continua ad avere sotto di sé una zona chiara. */

.dc-hero {
  position: relative;
  overflow: hidden;
  background: var(--dc-bg-warm);

  /* L'altezza segue la larghezza, così il rapporto della sezione resta
     costante su qualunque schermo e il ritaglio della foto è sempre lo
     stesso. Con un'altezza fissa, su un monitor largo la sezione diventa una
     fessura e `cover` mangia sopra e sotto: il fondo della borsa finiva
     fuori. Il tetto a 1000px interviene solo oltre i 3100px di larghezza. */
  min-height: clamp(430px, 32vw, 1000px);

  display: flex;
  align-items: center;
}

.dc-hero__media { position: absolute; inset: 0; }

/* <picture> è un elemento inline: senza questo si dimensiona sul contenuto e
   l'`img` con width:100% si misura su di lui invece che sulla sezione — la
   foto copriva solo due terzi dell'hero. Stessa trappola dello <span> con
   width ignorata: gli elementi inline non si comportano come contenitori. */
.dc-hero__media picture { display: block; width: 100%; height: 100%; }

.dc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La borsa occupa il 46,2%-77,9% dell'altezza della foto: misurato sui
     pixel, non stimato a occhio — la stima precedente sbagliava il fondo di
     due punti ed era esattamente il margine che mancava sopra i 1640px.
     Con il 72% la finestra visibile va dal 31% all'88% e sotto la borsa
     resta un po' di marmo. Il prezzo è la cima del vaso, che sugli schermi
     larghi esce dall'inquadratura: è una scelta, non un incidente. */
  object-position: 50% 72%;
  display: block;
}

/* Il velo. Il testo è scuro su una foto chiara: serve a garantire il
   contrasto anche quando la parete non è perfettamente uniforme. Si spegne
   prima della metà, così la borsa non viene mai toccata. */
.dc-hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(253, 251, 248, .95) 0%,
    rgba(253, 251, 248, .84) 22%,
    rgba(253, 251, 248, .38) 40%,
    rgba(253, 251, 248, 0) 54%);
}

/* La barra di ricerca sale di 4,25rem dentro la hero (margine negativo, è
   voluto). Il testo però è centrato verticalmente e non ne sa nulla: fra i
   1024 e i 1600px l'ultima riga del sommario finiva sotto la scheda bianca.
   Il padding inferiore maggiorato tiene il testo fuori da quella fascia. */
.dc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vh, 4.5rem) 0 calc(clamp(2.5rem, 6vh, 4.5rem) + 4.75rem);
}
.dc-hero__testo { max-width: 30rem; }

.dc-hero__title {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 0;
}
.dc-hero__lead { font-size: 1.02rem; color: var(--dc-ink-soft); max-width: 34ch; margin: 0; }

/* ---------------------------------------------------------------- Mobile --

   Anche qui testo sopra la foto, come sul desktop: quello che cambia è la
   direzione della sfumatura, perché su uno schermo stretto il testo sta in
   alto e non a sinistra.

   Il punto delicato è che sfumatura e borsa non devono mai incontrarsi. Non
   si risolve con il CSS ma con il ritaglio: `hero-mobile-*` comprende tutto
   il muro sopra il tavolo, così la borsa cade fra il 45% e il 76%
   dell'altezza e il terzo superiore resta parete vuota. La sfumatura si
   spegne al 44%, prima di arrivarci.

   Da qui l'altezza minima generosa: serve spazio verticale perché il testo
   stia tutto sopra la borsa. Su un iPhone la hero occupa quasi lo schermo,
   che per una hero è il comportamento giusto.                              */

@media (max-width: 767.98px) {
  .dc-hero {
    /* 700px non è un numero tondo scelto a occhio: il testo più lungo delle
       due lingue occupa 310px e la borsa comincia al 46,2% dell'altezza,
       quindi sotto i 671px si toccherebbero. Verificato a 360, 390 e 414. */
    min-height: clamp(700px, 84vh, 780px);
    align-items: flex-start;
    padding-top: 1.5rem;
  }

  .dc-hero__inner { padding: 0 0 2rem; }
  .dc-hero__testo { max-width: 100%; }

  .dc-hero__velo {
    background: linear-gradient(180deg,
      rgba(253, 251, 248, .95) 0%,
      rgba(253, 251, 248, .90) 20%,
      rgba(253, 251, 248, .60) 33%,
      rgba(253, 251, 248, 0) 44%);
  }

  /* 42% invece di 50%: il ritaglio è più largo dello schermo e questo
     spostamento tiene dentro la borsa intera, sacrificando un po' di tazza
     sul bordo destro. */
  .dc-hero__media img { object-position: 42% 50%; }
}

/* Barra di ricerca */
.dc-searchbar {
  position: relative;
  z-index: 3;
  margin-top: -4.25rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--dc-shadow);
  padding: 1.1rem 1.1rem 1.1rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dc-searchbar__icon { color: var(--dc-muted); flex: 0 0 auto; }
.dc-searchbar__icon svg { width: 22px; height: 22px; }

.dc-searchbar__field { flex: 1 1 auto; min-width: 0; }
.dc-searchbar__label {
  font-family: var(--dc-serif);
  font-size: 1.25rem;
  color: var(--dc-ink);
  display: block;
  margin-bottom: .1rem;
}
.dc-searchbar input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--dc-sans);
  font-size: .95rem;
  font-weight: 300;
  color: var(--dc-ink);
  padding: 0;
}
.dc-searchbar input::placeholder { color: #b3aaa1; }
.dc-searchbar input:focus { outline: none; }
.dc-searchbar .dc-btn { flex: 0 0 auto; }

/* ------------------------------------------------------------ Valori --- */

.dc-value { text-align: center; padding: 0 1rem; }
.dc-value__icon { color: var(--dc-accent); margin-bottom: 1.1rem; }
.dc-value__icon svg { width: 38px; height: 38px; }
.dc-value__title {
  font-family: var(--dc-sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.dc-value__text { font-size: .95rem; color: var(--dc-ink-soft); margin: 0; }

.dc-values-row > [class*="col"] + [class*="col"] { border-left: 1px solid var(--dc-line); }
@media (max-width: 767.98px) {
  .dc-values-row > [class*="col"] + [class*="col"] {
    border-left: 0;
    border-top: 1px solid var(--dc-line);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
  }
}

/* Nota discrezione */
.dc-discretion { display: flex; align-items: flex-start; gap: 1.25rem; justify-content: center; }
.dc-discretion__icon { color: var(--dc-accent); flex: 0 0 auto; }
.dc-discretion__icon svg { width: 30px; height: 30px; }
.dc-discretion__title {
  font-family: var(--dc-sans);
  font-size: .8rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .3rem;
}

/* ---------------------------------------------------- Come funziona --- */

.dc-step { position: relative; padding-top: .5rem; }
.dc-step__num {
  font-family: var(--dc-serif);
  font-size: 3.2rem;
  color: var(--dc-accent);
  opacity: .35;
  line-height: 1;
  display: block;
  margin-bottom: .6rem;
}
.dc-step__title { font-size: 1.5rem; margin-bottom: .6rem; }
.dc-step__text { font-size: .95rem; color: var(--dc-ink-soft); margin: 0; }

/* ------------------------------------------------------------- About --- */

.dc-about p { max-width: 62ch; }
.dc-about__lead { font-family: var(--dc-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.35; }
.dc-about__close { font-family: var(--dc-serif); font-style: italic; font-size: 1.2rem; color: var(--dc-accent-dk); }

/* --------------------------------------------------------------- FAQ --- */

.dc-faq { max-width: 780px; margin-inline: auto; }
.dc-faq details {
  border-bottom: 1px solid var(--dc-line);
  padding: 1.35rem 0;
}
.dc-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--dc-serif);
  font-size: 1.3rem;
  color: var(--dc-ink);
}
.dc-faq summary::-webkit-details-marker { display: none; }
.dc-faq summary::after {
  content: "+";
  font-family: var(--dc-sans);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--dc-accent);
  transition: transform .25s ease;
  flex: 0 0 auto;
}
.dc-faq details[open] summary::after { content: "–"; }
.dc-faq details p { margin: .9rem 0 0; color: var(--dc-ink-soft); font-size: .95rem; max-width: 68ch; }

/* ------------------------------------------------------------- CTA ----- */

.dc-cta { text-align: center; position: relative; z-index: 2; }
.dc-cta__title { font-size: clamp(1.9rem, 4vw, 3rem); }

/* ------------------------------------------------------------ Footer --- */

.dc-footer { background: var(--dc-bg); border-top: 1px solid var(--dc-line); padding: 4rem 0 2rem; }
.dc-footer__head {
  font-family: var(--dc-sans);
  font-size: .72rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-ink);
  margin-bottom: 1.1rem;
}
.dc-footer__list { list-style: none; padding: 0; margin: 0; }
.dc-footer__list li { margin-bottom: .55rem; }
.dc-footer__list a { font-size: .9rem; color: var(--dc-ink-soft); }
.dc-footer__bottom {
  border-top: 1px solid var(--dc-line);
  margin-top: 3rem; padding-top: 1.5rem;
  font-size: .78rem; color: var(--dc-muted);
}

/* ====================================================== Flusso ricerca === */

.dc-flow {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--dc-bg);
  display: none;
  overflow-y: auto;
}
.dc-flow.is-open { display: block; }
body.dc-flow-open { overflow: hidden; }

.dc-flow__bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--dc-bg);
  border-bottom: 1px solid var(--dc-line);
}
.dc-flow__bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; }

.dc-flow__close { background: none; border: 0; color: var(--dc-muted); padding: .4rem; line-height: 0; }
.dc-flow__close:hover { color: var(--dc-ink); }
.dc-flow__close svg { width: 20px; height: 20px; }

.dc-progress { display: flex; gap: 6px; }
.dc-progress span {
  width: 34px; height: 2px;
  background: var(--dc-line);
  transition: background .35s ease;
}
.dc-progress span.is-done { background: var(--dc-accent); }

.dc-flow__body { max-width: 660px; margin-inline: auto; padding: clamp(2.5rem, 8vh, 6rem) 0 5rem; }

.dc-step-panel { display: none; }
.dc-step-panel.is-active { display: block; animation: dcFade .45s ease both; }
@keyframes dcFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.dc-q { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.75rem; }
.dc-q__hint { font-size: .9rem; color: var(--dc-muted); margin: -1.25rem 0 1.75rem; }

.dc-input, .dc-textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--dc-line);
  background: transparent;
  font-family: var(--dc-sans);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--dc-ink);
  padding: .7rem 0;
  transition: border-color .25s ease;
}
.dc-textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.dc-input:focus, .dc-textarea:focus { outline: none; border-bottom-color: var(--dc-accent); }
.dc-input::placeholder, .dc-textarea::placeholder { color: #bdb4ab; }

.dc-field-label {
  display: block;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-muted);
  margin-bottom: .2rem;
}

/* Chip di scelta */
.dc-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.dc-chip {
  background: transparent;
  border: 1px solid var(--dc-line);
  border-radius: 999px;
  padding: .6rem 1.35rem;
  font-family: var(--dc-sans);
  font-size: .88rem;
  font-weight: 300;
  color: var(--dc-ink-soft);
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: .55rem;
}
.dc-chip:hover { border-color: var(--dc-accent); color: var(--dc-ink); }
.dc-chip.is-selected { background: var(--dc-ink); border-color: var(--dc-ink); color: #fff; }
.dc-chip.is-selected .dc-swatch { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }

.dc-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }

/* Avviso di attesa lunga: tono discreto, non è un errore. */
.dc-attesa {
  font-family: var(--dc-serif);
  font-style: italic;
  color: var(--dc-muted);
  font-size: .95rem;
  margin: 0 0 .9rem;
}

.dc-flow__actions { margin-top: 2.75rem; display: flex; align-items: center; gap: 1.5rem; }

.dc-error { color: #a8442e; font-size: .85rem; margin-top: .75rem; min-height: 1.2rem; }

.dc-consent { font-size: .82rem; color: var(--dc-muted); margin-top: 1.75rem; display: flex; gap: .6rem; align-items: flex-start; }
.dc-consent input { margin-top: .35rem; accent-color: var(--dc-accent); }

/* Riepilogo step 5 */
.dc-recap { background: var(--dc-bg-alt); border: 1px solid var(--dc-line); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.dc-recap dl { margin: 0; display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .4rem 1.25rem; }
.dc-recap dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dc-muted); font-weight: 400; padding-top: .2rem; }
.dc-recap dd { margin: 0; font-size: .92rem; color: var(--dc-ink); }

/* Conferma */
.dc-done { text-align: center; }
.dc-done__mark { color: var(--dc-accent); margin-bottom: 1.5rem; }
.dc-done__mark svg { width: 52px; height: 52px; }
.dc-done__title { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.25rem; }
.dc-done__text { color: var(--dc-ink-soft); max-width: 48ch; margin-inline: auto; }
.dc-done__code {
  display: inline-block;
  margin-top: 2rem;
  border: 1px solid var(--dc-line);
  padding: .9rem 2rem;
  font-family: var(--dc-sans);
  font-size: 1.1rem;
  letter-spacing: .22em;
  color: var(--dc-ink);
}
.dc-done__code small { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dc-muted); margin-bottom: .35rem; }

/* Spinner */
.dc-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  margin-right: .6rem;
  animation: dcSpin .7s linear infinite;
}
@keyframes dcSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   COMPARSE ALLO SCROLL
   Usate da entrambe le varianti. Chi ha chiesto meno animazioni nel sistema
   operativo non vede nulla muoversi (vedi prefers-reduced-motion in fondo).
   ========================================================================== */

.dc-reveal { opacity: 0; transform: translateY(22px); }
.dc-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.dc-reveal--d1.is-in { transition-delay: .12s; }

/* Variante senza scorrimento: solo la dissolvenza, più lenta. Usata dalla
   firma, dove il movimento verso l'alto sembrerebbe un elemento che entra
   invece che inchiostro che affiora. */
.dc-reveal--fade { transform: none; }
.dc-reveal--fade.is-in { transform: none; transition: opacity 1.6s ease .15s; }
.dc-reveal--d2.is-in { transition-delay: .24s; }
.dc-reveal--d3.is-in { transition-delay: .36s; }

/* Filetto che si disegna da sinistra quando entra in vista */
.dc-drawline { width: 0; height: 1px; background: var(--dc-accent); opacity: .5; }
.dc-drawline.is-in { width: 56px; transition: width 1s cubic-bezier(.22,.61,.36,1) .1s; }
.dc-drawline--wide.is-in { width: 100%; }

/* ==========================================================================
   VARIANTE A — EDITORIALE
   Blocchi alternati testo / pannello grafico.
   ========================================================================== */

.dc-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
.dc-split + .dc-split { margin-top: clamp(3.5rem, 8vw, 7rem); }
.dc-split--flip .dc-split__media { order: -1; }

.dc-split__num {
  font-family: var(--dc-serif);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: .85;
  color: var(--dc-accent);
  opacity: .3;
  display: block;
  margin-bottom: .75rem;
}
.dc-split__title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.dc-split__text { font-size: 1rem; color: var(--dc-ink-soft); max-width: 46ch; margin: 0; }

/* Pannello che oggi fa le veci della fotografia.
   È volutamente grafico e non una foto stock: tiene il tono premium
   e si sostituisce con un'immagine vera senza toccare il resto. */
.dc-panel {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 25% 15%, #fffdfa 0%, rgba(255,253,250,0) 55%),
    linear-gradient(150deg, var(--dc-bg-alt) 0%, var(--dc-bg-warm) 55%, #e2d8ca 100%);
  border: 1px solid var(--dc-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-panel::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(154,128,95,.05) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.dc-panel__mark { display: block; width: 34%; color: var(--dc-accent); opacity: .3; }
.dc-panel__mark svg { width: 100%; height: auto; display: block; }

.dc-panel__caption {
  position: absolute;
  left: 1.25rem; bottom: 1.1rem;
  font-family: var(--dc-sans);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dc-muted);
}

/* Riquadro valore, versione editoriale con cornice a filetto */
.dc-card {
  border: 1px solid var(--dc-line);
  background: #fff;
  padding: 2.5rem 2rem;
  height: 100%;
  text-align: center;
  transition: border-color .35s ease, transform .35s ease;
}
.dc-card:hover { border-color: var(--dc-accent); transform: translateY(-4px); }
.dc-card__icon { color: var(--dc-accent); margin-bottom: 1.25rem; }
.dc-card__icon svg { width: 34px; height: 34px; }
.dc-card__num {
  font-family: var(--dc-serif);
  font-size: .95rem;
  color: var(--dc-accent);
  display: block;
  margin-bottom: .5rem;
}

/* Citazione in evidenza */
.dc-pullquote {
  font-family: var(--dc-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.3;
  color: var(--dc-ink);
  border-left: 2px solid var(--dc-accent);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  margin: 3rem 0;
  max-width: 26ch;
}

/* --------------------------------------------------------- La firma --- */

/* Due colonne uguali: la citazione a sinistra, la firma centrata nella
   propria metà. Con flex e space-between la firma restava schiacciata a
   destra e il centro cambiava a seconda della lunghezza della citazione. */
.dc-about__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 1rem;
}
.dc-about__foot .dc-pullquote { margin-bottom: 0; }

.dc-firma { text-align: center; justify-self: center; max-width: 340px; }
.dc-firma--center { margin: 3.5rem auto 0; max-width: 300px; }

/* LA FIRMA
   --------------------------------------------------------------------------
   Compare con una semplice dissolvenza (.dc-reveal--fade), come inchiostro
   che affiora sulla carta.

   Prima si "scriveva" parola per parola con un puntino d'inchiostro che
   correva sul bordo: un effetto costruito bene ma troppo appariscente per
   quello che è, la chiusa discreta di una pagina. Tutto quell'apparato —
   clip-path animato, penna, oscillazione — è stato tolto: erano un centinaio
   di righe fra CSS e JavaScript che ora non ci sono più.
   -------------------------------------------------------------------------- */

.dc-firma__scritta {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .12em;

  /* Inspiration: tratto sottile e continuo, inclinazione già nel disegno del
     carattere, lettere informali. È uno script da FIRMA, non da calligrafia
     — copperplate come Pinyon Script o Great Vibes leggono come incisi.

     Per cambiarlo servono due punti: questa riga e il <link> di Google Fonts
     nelle sei pagine HTML. Altre alternative da firma vera:
     "Herr Von Muellerhoff", "Mrs Saint Delafield", "Ms Madi". */
  font-family: "Inspiration", "Snell Roundhand", "Segoe Script", cursive;

  font-size: clamp(2.6rem, 4.8vw, 3.7rem);
  line-height: 1.1;

  /* Inchiostro caldo, non nero pieno, e semitrasparente: una penna scarica
     inchiostro in modo irregolare e non copre mai come una stampa. */
  color: #2f2a24;
  opacity: .76;

  white-space: nowrap;
  transform: rotate(-3.8deg);
  transform-origin: 50% 50%;
  padding: .12em .14em .2em;
}

.dc-firma__parola { display: inline-block; }

/* Il cognome leggermente più grande, più basso e più inclinato del nome.
   In una firma vera le due parole non sono mai identiche: la mano accelera,
   la penna scende, il cognome esce più largo. Due parole perfettamente
   allineate e della stessa misura sono la cosa che tradisce il carattere
   tipografico più di qualsiasi altra. */
.dc-firma__parola--2 {
  font-size: 1.08em;
  transform: translateY(.05em) rotate(-1.2deg);
}


/* Svolazzo sotto il nome. Più corto, più sottile e più chiaro di prima:
   il tratto lungo e nero sembrava un sottolineato da modulo. */
.dc-firma__svolazzo {
  display: block;
  width: 46%;
  height: auto;
  margin: -.15rem auto .9rem;
  color: rgba(47, 42, 36, .42);
  transform: rotate(-3.2deg);
}

/* Il ruolo, e basta. Il nome in maiuscoletto che stava qui sotto è stato
   tolto: ripetere lo stesso nome due volte a due centimetri di distanza
   era la cosa che più tradiva il blocco. La firma è testo vero, quindi si
   legge da sola anche con uno screen reader. */
.dc-firma__ruolo {
  font-family: var(--dc-sans);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dc-muted);
  margin: 0;
}

@media (max-width: 767.98px) {
  .dc-about__foot { grid-template-columns: 1fr; }
  .dc-firma { margin-top: 1.5rem; }
}

/* Capolettera */
.dc-dropcap::first-letter {
  font-family: var(--dc-serif);
  float: left;
  font-size: 3.9em;
  line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--dc-accent);
}

/* ==========================================================================
   VARIANTE C — ANIMAZIONI AL POSTO DELLE FOTOGRAFIE
   Ogni riquadro racconta il passaggio accanto a cui sta. Il comportamento
   sta in assets/js/animazioni.js; qui c'è solo l'aspetto.
   ========================================================================== */

.dc-anim {
  position: relative;

  /* Il rapporto dà la forma, l'altezza minima garantisce che il contenuto ci
     stia. Servono entrambi: da soli, `aspect-ratio` più `overflow: hidden`
     creano una scatola rigida che taglia il contenuto invece di crescere —
     ed è quello che succedeva al dossier su schermo stretto.

     Il minimo è in pixel perché il contenuto non dipende dalla larghezza: le
     voci del foglio sono a riga singola. Con sei voci servono circa 338px;
     360 lascia margine per una settima senza dover ricalcolare. */
  aspect-ratio: 4 / 3;
  min-height: 360px;
  border: 1px solid var(--dc-line);
  background: linear-gradient(150deg, var(--dc-bg-alt) 0%, var(--dc-bg-warm) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  /* dice al browser che nulla dentro può influenzare il fuori: i ridisegni
     restano confinati al riquadro invece di risalire tutta la pagina */
  contain: content;
}
.dc-anim__canvas { position: absolute; inset: 0; display: block; }

/* --- 1. la richiesta che si scrive --- */

.dc-anim__paper { position: relative; width: 100%; max-width: 30ch; }
.dc-anim__label {
  font-family: var(--dc-sans);
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dc-muted);
  margin: 0 0 .9rem;
}
.dc-anim__typed {
  font-family: var(--dc-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--dc-ink);
  margin: 0 0 .9rem;
  min-height: 4.4em;
}
.dc-anim__caret {
  display: inline-block;
  width: 1px; height: 1em;
  background: var(--dc-accent);
  vertical-align: -.14em;
  margin-left: 2px;
  animation: dcCaret 1.05s steps(1) infinite;
}
@keyframes dcCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.dc-anim__rule { display: block; height: 1px; background: var(--dc-line); width: 100%; }

/* --- 3. il dossier che si compone --- */

.dc-anim__sheet {
  position: relative;
  width: 100%;
  max-width: 34ch;
  background: #fff;
  border: 1px solid var(--dc-line);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  box-shadow: 0 14px 40px rgba(60, 48, 36, .07);
}
.dc-anim__sheet-title {
  font-family: var(--dc-sans);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dc-accent-dk);
  margin: 0 0 .7rem;
}
.dc-anim__rows { margin: .9rem 0 0; }
.dc-anim__row {
  display: grid;
  grid-template-columns: 8.5ch 1fr;
  gap: .75rem;
  padding: .38rem 0;
  border-bottom: 1px solid var(--dc-bg-alt);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
  min-height: 2.05em;
}
.dc-anim__row.is-in { opacity: 1; transform: none; }
.dc-anim__row dt {
  font-family: var(--dc-sans);
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dc-muted);
  font-weight: 400;
  padding-top: .28em;
}
.dc-anim__row dd {
  margin: 0;
  font-family: var(--dc-serif);
  font-size: .98rem;
  color: var(--dc-ink);

  /* Una riga sola, sempre. La riga ha già `min-height: 2.05em`, quindi il
     passaggio da vuota a piena non cambiava nulla: a far crescere il foglio
     durante l'animazione era il valore che andava a capo su schermo stretto,
     portando la riga da due a tre righe di testo. Il riquadro si allargava a
     scatti mentre le voci comparivano.

     Con il troncamento l'altezza del foglio è decisa in partenza e non
     dipende più né dalla lunghezza dei valori né dalla lingua. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-anim__seal {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.1rem 0 0;
  font-family: var(--dc-sans);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dc-accent);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.dc-anim__seal.is-in { opacity: 1; transform: none; }
.dc-anim__seal svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- hero animato --- */

.dc-hero-anim { position: relative; overflow: hidden; }

/* IL FARO CHE GIRA
   --------------------------------------------------------------------------
   Prima versione: due fasci larghissimi che partivano dal fondo dell'hero e
   oscillavano. Troppo tenui e troppo lontani dal marchio per significare
   qualcosa — giustamente segnalati come "insignificanti".

   Ora la luce parte dalla LANTERNA del faro del logo e gira davvero, come
   un faro vero: due fasci opposti su un perno che compie un giro completo.
   Il marchio smette di essere un disegno fermo e diventa la cosa che
   illumina. Sotto, la lanterna pulsa piano.

   Costa comunque nulla: si muovono solo `transform` e `opacity`, che il
   browser gestisce sul compositore senza ridisegnare niente.
   -------------------------------------------------------------------------- */

/* Altezza contenuta di proposito: con i valori precedenti, su un portatile
   da tredici pollici la barra di ricerca finiva sotto la piega e la prima
   cosa che il sito chiede — «raccontaci cosa cerchi» — non si vedeva senza
   scorrere. Su una landing è il difetto che costa di più. */
/* Il perno: sta dentro al blocco del marchio, esattamente sulla lanterna.
   Le percentuali vengono dal disegno del logo: nel viewBox 200×176 la luce
   è a (76.3, 33.3), cioè al 38.2% in orizzontale e al 18.9% in verticale. */
/* pointer-events: none è obbligatorio, non un dettaglio. Il faro ha z-index 2
   e i fasci larghi 130vw: pur essendo disegnati dietro al testo, restavano
   davanti nel calcolo dei clic e coprivano il pulsante sottostante. La luce
   copriva l'invito ad agire — il difetto peggiore possibile su una CTA. */
.dc-hero-anim__lamp {
  position: relative;
  width: 84px;
  margin: 0 auto 2rem;
  z-index: 2;
  pointer-events: none;
}

.dc-hero-anim__mark { display: block; width: 100%; color: var(--dc-accent); position: relative; z-index: 1; }
.dc-hero-anim__mark svg { width: 100%; height: auto; display: block; }

.dc-lamp-beams {
  position: absolute;
  left: 38.2%;
  top: 18.9%;
  width: 0; height: 0;
  /* z-index negativo: dentro al contesto creato da .dc-hero-anim__inner i
     fasci finiscono DIETRO al testo, che resta perfettamente leggibile.
     Con z-index positivo passerebbero sopra al titolo sbiancandolo. */
  z-index: -1;
  animation: dcLamp 19s linear infinite;
  will-change: transform;
}
/* IL CONO.
   Prima erano rettangoli di larghezza costante mascherati ai lati: infatti
   non sembravano fasci, sembravano strisce. Un fascio di luce parte stretto
   dalla sorgente e si allarga con la distanza, quindi la forma giusta è un
   triangolo con il vertice sulla lanterna.

   `clip-path` ritaglia il triangolo, il gradiente lo fa spegnere andando
   lontano, la sfocatura ammorbidisce i due lati obliqui — che altrimenti
   sarebbero righe nette e tradirebbero il trucco. La sfocatura viene
   calcolata una volta sola: dopo si anima solo la rotazione del genitore,
   quindi il livello resta in cache e non si ridisegna. */
.dc-lamp-beams i {
  position: absolute;
  left: 0;
  top: 0;
  width: 92vw;
  height: 56vh;
  margin-top: -28vh;
  transform-origin: 0 50%;

  /* IL CONO.
     Tre tentativi prima di arrivarci, vale la pena annotarli.

     1. clip-path a triangolo: forma giusta, ma i due lati obliqui erano
        righe nette — sembrava un poligono incollato, non luce.
     2. clip-path più filter: blur(28px): bello, ma sfocare un elemento così
        grande a ogni composizione costa moltissimo. Chrome non riusciva
        nemmeno a catturare uno screenshot della pagina.
     3. sola maschera ellittica: economica, ma la forma non era più un cono:
        una macchia sfumata.

     La soluzione è il gradiente conico, che nasce proprio per questo: la
     luce è definita da un settore angolare con bordi che sfumano da soli,
     senza sfocature da ricalcolare. Il centro sta sul vertice sinistro
     (`at 0% 50%`), gli angoli si misurano da nord in senso orario, quindi
     il cono punta a destra fra 80 e 100 gradi. */
  background: conic-gradient(from 0deg at 0% 50%,
    transparent 0deg,
    transparent 79deg,
    rgba(255, 253, 250, .82) 87deg,
    rgba(255, 253, 250, .82) 93deg,
    transparent 101deg,
    transparent 360deg);

  /* La maschera si occupa solo della distanza: la luce si spegne andando
     lontano dalla sorgente. Angolo e distanza restano due cose separate,
     ognuna gestita da chi la sa fare meglio. */
  -webkit-mask-image: radial-gradient(circle at 0% 50%,
    #000 0%, rgba(0,0,0,.85) 26%, rgba(0,0,0,.4) 58%, transparent 86%);
  mask-image: radial-gradient(circle at 0% 50%,
    #000 0%, rgba(0,0,0,.85) 26%, rgba(0,0,0,.4) 58%, transparent 86%);
}
.dc-lamp-beams i:last-child { transform: rotate(180deg); opacity: .6; }

/* Alone attorno alla lanterna, che respira */
.dc-lamp-glow {
  position: absolute;
  left: 38.2%;
  top: 18.9%;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 250, .95) 0%, rgba(255, 250, 240, .35) 40%, rgba(255, 253, 250, 0) 70%);
  z-index: -1;
  animation: dcGlow 5.5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes dcLamp { to { transform: rotate(360deg); } }
@keyframes dcGlow {
  0%, 100% { opacity: .5;  transform: scale(.86); }
  50%      { opacity: 1;   transform: scale(1.14); }
}

@media (max-width: 767.98px) {
  /* Su schermo stretto il rapporto 4/3 non basta: il foglio del dossier è
     più alto del riquadro e veniva tagliato.

     L'altezza minima è in pixel e non in `vw` di proposito. Legata alla
     larghezza sembrava elegante, ma su un telefono da 360px sarebbe tornata
     sotto l'altezza del contenuto e avrebbe ricominciato a tagliare: la
     stessa correzione avrebbe funzionato su un modello e fallito sull'altro.
     Il contenuto non dipende dalla larghezza — le voci sono a riga singola —
     quindi nemmeno il riquadro deve dipenderne.

     Con il contenuto a dimensione costante, questo minimo è anche l'altezza
     effettiva: fissa dal primo fotogramma, nessun sussulto durante
     l'animazione. Se un giorno il contenuto crescesse, il riquadro
     crescerebbe una volta al caricamento invece di tagliare. */
  .dc-anim { padding-block: 1rem; }

  /* Vedi la nota sulla griglia: qui le colonne si impilano, quindi la gronda
     orizzontale non serve a niente e toglierla elimina lo sbordamento che
     faceva scorrere lateralmente tutta la pagina. */
  .row .row { --gx: 1.5rem; }

  .dc-hero-anim__lamp { width: 84px; }
  .dc-lamp-beams i { width: 130vw; height: 44vh; margin-top: -22vh; }
  .dc-lamp-glow { width: 110px; height: 110px; margin: -55px 0 0 -55px; }
}

/* ==========================================================================
   VARIANTE B — TIPOGRAFICA
   Nessuna immagine. Solo scala, spazio e filetti.
   ========================================================================== */

.dc-hero-type { background: var(--dc-bg-warm); position: relative; overflow: hidden; }
.dc-hero-type__inner { padding: clamp(5rem, 14vh, 9rem) 0 clamp(6rem, 12vh, 8rem); text-align: center; position: relative; z-index: 2; }
/* display:block è obbligatorio: su uno <span> inline la width viene ignorata
   e l'SVG dentro si prende il 100% del contenitore, comparendo gigantesco. */
.dc-hero-type__mark { display: block; width: 96px; color: var(--dc-accent); margin: 0 auto 2.25rem; opacity: .85; }
.dc-hero-type__mark svg { width: 100%; height: auto; display: block; }
.dc-hero-type__title {
  /* 7vw su uno schermo largo dava titoli da 110px: imponenti ma capaci di
     spingere tutto il resto fuori dallo schermo. */
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.08;
  margin: 0 auto 1.5rem;
  max-width: 18ch;
}
.dc-hero-type__lead {
  font-family: var(--dc-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--dc-ink-soft);
  max-width: 40ch;
  margin: 0 auto;
}

/* Grande filigrana decorativa dietro al titolo */
.dc-hero-type__ghost {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--dc-serif);
  font-size: clamp(16rem, 40vw, 34rem);
  line-height: 1;
  color: #fff;
  opacity: .3;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}

/* Elenco numerato monumentale */
.dc-numlist { border-top: 1px solid var(--dc-line); }
.dc-numlist__item {
  display: grid;
  grid-template-columns: minmax(90px, 14%) 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--dc-line);
  align-items: start;
}
.dc-numlist__n {
  font-family: var(--dc-serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--dc-accent);
  text-stroke: 1px var(--dc-accent);
  opacity: .75;
}
.dc-numlist__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .7rem; }
.dc-numlist__text { color: var(--dc-ink-soft); font-size: .98rem; max-width: 58ch; margin: 0; }

/* Manifesto: paragrafi in serif grande, misura stretta */
.dc-manifesto { max-width: 34ch; margin-inline: auto; text-align: center; }
.dc-manifesto p {
  font-family: var(--dc-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.42;
  color: var(--dc-ink);
  margin-bottom: 1.5rem;
}
.dc-manifesto p:last-child { margin-bottom: 0; }
.dc-manifesto .dc-quiet { color: var(--dc-muted); font-style: italic; }

/* Tre valori in colonne separate da filetti verticali sottili */
.dc-triad { display: grid; grid-template-columns: repeat(3, 1fr); }
.dc-triad > div { padding: 0 clamp(1rem, 3vw, 2.5rem); text-align: center; }
.dc-triad > div + div { border-left: 1px solid var(--dc-line); }
.dc-triad__label {
  font-family: var(--dc-sans);
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--dc-accent-dk);
  margin-bottom: 1rem;
}
.dc-triad__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .8rem; }
.dc-triad__text { font-size: .93rem; color: var(--dc-ink-soft); margin: 0; }

@media (max-width: 767.98px) {
  .dc-split { grid-template-columns: 1fr; }
  .dc-split--flip .dc-split__media { order: 0; }
  .dc-numlist__item { grid-template-columns: 1fr; gap: .75rem; }
  .dc-triad { grid-template-columns: 1fr; }
  .dc-triad > div { padding: 2.25rem 0; }
  .dc-triad > div + div { border-left: 0; border-top: 1px solid var(--dc-line); }
  .dc-pullquote { margin: 2rem 0; }
}

/* Selettore di variante, solo in fase di valutazione */
.dc-variant {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 1500;
  background: #fff;
  border: 1px solid var(--dc-line);
  box-shadow: 0 8px 30px rgba(60,48,36,.12);
  padding: .55rem .8rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-muted);
  display: flex; align-items: center; gap: .6rem;
}
.dc-variant a { color: var(--dc-muted); border-bottom: 1px solid transparent; }
.dc-variant a:hover { color: var(--dc-ink); }
.dc-variant a.is-current { color: var(--dc-ink); border-bottom-color: var(--dc-accent); }

/* Numero del passaggio, dentro al flusso */
.dc-q__step {
  font-family: var(--dc-sans);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dc-muted);
  margin-bottom: 1rem;
}

/* ================================================== Pagine legali ======== */

.dc-legal { max-width: 760px; margin-inline: auto; padding: 4rem 0 6rem; }
.dc-legal h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .5rem; }
.dc-legal h2 {
  font-size: 1.45rem;
  margin: 2.75rem 0 .85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--dc-line);
}
.dc-legal h3 { font-family: var(--dc-sans); font-size: .8rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; margin: 1.75rem 0 .6rem; }
.dc-legal p, .dc-legal li { color: var(--dc-ink-soft); font-size: .97rem; }
.dc-legal ul { padding-left: 1.2rem; }
.dc-legal li { margin-bottom: .45rem; }
.dc-legal__date { font-size: .82rem; color: var(--dc-muted); letter-spacing: .04em; }
.dc-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .9rem; }
.dc-legal th, .dc-legal td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--dc-line); vertical-align: top; }
.dc-legal th { font-family: var(--dc-sans); font-weight: 400; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dc-muted); }
.dc-legal td { color: var(--dc-ink-soft); }

/* Segnaposto da compilare prima della pubblicazione */
.todo {
  background: #fdf2d8;
  border-bottom: 1px solid #d9b45f;
  padding: .05em .35em;
  color: #6b5312;
  font-style: normal;
}

.dc-legal__note {
  background: var(--dc-bg-alt);
  border-left: 3px solid var(--dc-accent);
  padding: 1.1rem 1.4rem;
  margin: 2rem 0;
  font-size: .9rem;
}
.dc-legal__note p:last-child { margin-bottom: 0; }

/* Honeypot: fuori schermo, mai letto dagli screen reader (aria-hidden). */
.dc-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ================================================== Banner cookie ======== */

.dc-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2500;
  background: #fff;
  border-top: 1px solid var(--dc-line);
  box-shadow: 0 -14px 40px rgba(60, 48, 36, .10);
  padding: 1.5rem 0;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.dc-cookie.is-open { transform: none; }

.dc-cookie__main { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.dc-cookie__text { flex: 1 1 340px; }

.dc-cookie__title {
  font-family: var(--dc-sans);
  font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dc-accent-dk);
  margin: 0 0 .4rem;
}
.dc-cookie__body { font-size: .92rem; color: var(--dc-ink-soft); margin: 0 0 .4rem; max-width: 62ch; }
.dc-cookie__link { font-size: .85rem; color: var(--dc-muted); text-decoration: underline; text-underline-offset: 3px; }

.dc-cookie__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; flex: 0 0 auto; }
.dc-cookie__actions .dc-btn { padding: .8rem 1.6rem; font-size: .72rem; }

.dc-cookie__panel {
  border-top: 1px solid var(--dc-line);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
.dc-cookie__row { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.dc-cookie__rowtitle {
  font-family: var(--dc-sans);
  font-size: .8rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 .2rem;
}
.dc-cookie__rowtext { font-size: .88rem; color: var(--dc-ink-soft); margin: 0; max-width: 70ch; }

/* Interruttore */
.dc-cookie__switch { position: relative; flex: 0 0 auto; margin-top: .15rem; cursor: pointer; }
.dc-cookie__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dc-cookie__switch span {
  display: block;
  width: 42px; height: 22px;
  border-radius: 999px;
  background: #ddd5cb;
  transition: background .25s ease;
}
.dc-cookie__switch span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease;
}
.dc-cookie__switch input:checked + span { background: var(--dc-accent); }
.dc-cookie__switch input:checked + span::after { transform: translateX(20px); }
.dc-cookie__switch.is-locked { cursor: default; opacity: .65; }

@media (max-width: 767.98px) {
  .dc-cookie { padding: 1.25rem 0; max-height: 88vh; overflow-y: auto; }
  .dc-cookie__main { gap: 1.25rem; }
  .dc-cookie__actions { width: 100%; }
  .dc-cookie__actions .dc-btn:not(.dc-btn--link) { flex: 1 1 auto; text-align: center; }
}

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 991.98px) {
  /* Le vecchie regole `.dc-hero__media { inset: 0 0 0 30% }` sono state
     tolte: appartenevano all'hero di prima, dove l'immagine occupava solo
     la metà destra. Con la foto a tutta larghezza spostavano il fotogramma
     e lasciavano scoperto un terzo della sezione — difetto invisibile a
     occhio sul desktop, evidente misurando il DOM. */
  .dc-searchbar { flex-wrap: wrap; padding: 1.25rem; margin-top: -3.5rem; }
  .dc-searchbar .dc-btn { width: 100%; }
  .dc-section { padding: 4rem 0; }
}

/* Deve stare dopo il blocco qui sopra, non insieme alle altre regole mobile:
   a parità di specificità vince l'ultima scritta, e il -3.5rem la
   annullerebbe. */
@media (max-width: 767.98px) {
  /* La scheda bianca sale dentro la foto molto più che sul desktop, così
     l'invito ad agire si vede senza dover scorrere. Il limite è il fondo
     della borsa, al 77,9% dell'altezza: la scheda si ferma sul marmo, appena
     sotto. Fra 768 e 991px questo margine coprirebbe il soggetto, perché lì
     la hero è bassa — da qui il breakpoint separato. */
  .dc-searchbar { margin-top: -8rem; }
}

@media (max-width: 575.98px) {
  .dc-flow__actions { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .dc-flow__actions .dc-btn { width: 100%; text-align: center; }
  .dc-recap dl { grid-template-columns: 1fr; gap: .1rem 0; }
  .dc-recap dd { margin-bottom: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}