/* =========================================================================
   CRESPI — PAGINE DI TESTO (/privacy-policy/, /cookie-policy/) e 404
   Vive DOPO styles.css e hero.css e ne riusa i token: --ivory, --ink,
   --ink-soft, --olive, --line, --line-2, --radius, --ease, --pad,
   --testataH, --sans, --script, i comandi .btn/.link-underline e
   l'occhiello .eyebrow. NESSUN token nuovo di colore.
   Struttura della pagina legale: .leg-apertura (occhiello, titolo, lead,
   data) → .leg-corpo = griglia con l'indice interno a sinistra (appiccicato
   sotto la testata) e la colonna di lettura a destra, misura ~65ch.
   Le sezioni sono "titoli-nastro": filetto in testa, numerino olive e
   maiuscole Inter 800 tracciate — lo stesso registro dei titoli del sito,
   a corpo di paragrafo. Niente intro cinematografica, niente nuvole.
   ========================================================================= */

/* fondo Cararra (hero.css mette --foto sul body per la zona hero, che qui
   non c'e'), contenuto sotto la testata fissa */
body { background: var(--ivory); }
.legale { padding-top: calc(var(--testataH) + clamp(2.6rem, 6vw, 5rem));
  padding-bottom: clamp(4rem, 9vw, 7rem); }

/* ---------- apertura ---------- */
.leg-apertura { padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.leg-apertura__titolo { font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.42rem, 1rem + 1.5vw, 2.2rem); line-height: 1.24; letter-spacing: .12em;
  margin-top: .9rem; overflow-wrap: anywhere; max-width: 22ch; }
.leg-apertura__lead { margin-top: 1.2rem; font-weight: 300; color: var(--ink);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.32rem); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
/* la data e' una riga di colophon: micro-etichetta olive, come gli occhielli */
.leg-apertura__data { margin-top: 1.3rem; font-weight: 500; font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--olive); }

/* ---------- corpo: indice + lettura ---------- */
.leg-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-top: clamp(2rem, 4vw, 3rem); }
.leg-indice { position: sticky; top: calc(var(--testataH) + 20px); }
.leg-indice__h { display: block; font-weight: 500; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--olive); margin-bottom: .6rem; }
.leg-indice__lista { list-style: none; border-top: 1px solid var(--line); }
.leg-indice__lista li { border-bottom: 1px solid var(--line); }
.leg-indice__lista a { display: flex; align-items: baseline; gap: .9rem; padding: .62rem 0;
  font-weight: 400; font-size: .88rem; line-height: 1.3; color: var(--ink); transition: color .3s; }
.leg-indice__lista a span { flex: none; width: 1.9rem; font-weight: 500; font-size: .68rem;
  letter-spacing: .15em; color: var(--olive); font-variant-numeric: lining-nums; }
.leg-indice__lista a:hover { color: var(--olive); }

/* la colonna di lettura: Inter light, ~65ch */
.leg-testo { min-width: 0; max-width: 65ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.78; }
.leg-testo p + p { margin-top: 1rem; }
.leg-testo strong { font-weight: 600; color: var(--ink); }
.leg-testo a { color: var(--ink); border-bottom: 1px solid var(--olive); padding-bottom: .05em;
  overflow-wrap: anywhere; transition: color .3s; }
.leg-testo a:hover { color: var(--olive); }

/* IL TITOLO-NASTRO: filetto in testa, numerino olive, maiuscole tracciate.
   L'ancora arriva SOTTO la testata fissa. */
.leg-sez { scroll-margin-top: calc(var(--testataH) + 16px); }
.leg-sez + .leg-sez { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.leg-sez__t { display: flex; align-items: baseline; gap: 1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line); margin-bottom: 1.1rem;
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: .98rem; letter-spacing: .14em; line-height: 1.35; color: var(--ink); }
.leg-sez__t span { flex: none; font-weight: 500; font-size: .7rem; letter-spacing: .15em;
  color: var(--olive); font-variant-numeric: lining-nums; }
/* sottotitolo: minuscolo, peso 600, senza tracking (mai tracking sul minuscolo) */
.leg-sez h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: 0;
  color: var(--ink); margin: 1.4rem 0 .5rem; }

/* liste: il puntino olive del try-on */
.leg-testo ul { list-style: none; margin: .9rem 0 1rem; display: grid; gap: .5rem; }
.leg-testo ul li { position: relative; padding-left: 1.5rem; }
.leg-testo ul li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--olive); }

/* la scheda del titolare: fondo bianco, filetto, raggio del sito */
.leg-scheda { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin: 1.1rem 0 1.2rem; display: grid; gap: .3rem; }
.leg-scheda strong { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.leg-scheda span { font-size: .95rem; }

/* tabelle (i cookie di terzi): filetti, scorrono nella propria scatola */
.leg-tabella { overflow-x: auto; margin: 1rem 0 1.2rem; -webkit-overflow-scrolling: touch; }
.leg-tabella table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.leg-tabella th, .leg-tabella td { text-align: left; vertical-align: top; padding: .7rem .8rem .7rem 0;
  border-bottom: 1px solid var(--line); }
.leg-tabella th { font-weight: 500; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--olive); border-bottom-color: var(--ink); }
.leg-tabella td:first-child { color: var(--ink); font-weight: 500; }

/* coda: i comandi verso l'altra informativa e la home */
.leg-coda { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.leg-coda .link-underline { margin-top: 0; }

/* ---------- 404 ---------- */
.e404 { min-height: 100vh; min-height: 100svh; display: grid; align-items: center;
  padding-top: calc(var(--testataH) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(4rem, 9vw, 7rem); }
.e404__int { max-width: 62ch; }
.e404__titolo { font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.42rem, 1rem + 1.5vw, 2.2rem); line-height: 1.24; letter-spacing: .12em;
  margin-top: .9rem; overflow-wrap: anywhere; }
/* la voce calligrafica ACCOSTATA (.titolo-script di styles.css) sta dentro
   l'h1: qui solo l'attesa font, come il lockup dei cataloghi (niente balletto
   del fallback Snell Roundhand) */
.e404__titolo .titolo-script { transition: opacity .18s ease-out; }
.lk-attesa .e404__titolo .titolo-script { opacity: 0; }
.e404__testo { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.78; margin-top: 1.4rem; max-width: 46ch; }
.e404__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2.2rem; }
.e404__azioni .link-underline { margin-top: 0; }
/* una seconda riga di comandi sotto la prima (/virtual-try-on/): il passo delle righe */
.e404__azioni + .e404__azioni { margin-top: 1.2rem; }
/* i link DENTRO il testo (/virtual-try-on/, 17/09/2026: «seguici su Instagram
   e Facebook»): la stessa penna dei link delle pagine legali. L'area di tocco
   sale a 44px con un ::before assoluto, come .cat-cta__tel: il filetto non si
   muove. Le due parole possono finire su due righe consecutive, ma ai capi
   opposti della colonna: le aree non si intersecano mai (misurato da 320 a
   1700px nei tre motori). L'anello di focus e' dichiarato: quello "auto" di
   Chromium si gonfiava fino a comprendere il ::before e tagliava le righe
   vicine. */
.e404__testo a { position: relative; color: var(--ink); border-bottom: 1px solid var(--olive);
  padding-bottom: .05em; transition: color .3s; }
.e404__testo a:hover { color: var(--olive); }
.e404__testo a::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.e404__testo a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* colonna unica: l'indice prima del testo, non piu' appiccicato */
  /* minmax(0,1fr), non 1fr: la tabella dei cookie (min-width 520) deve
     scorrere nella sua scatola, non allargare la colonna */
  .leg-corpo { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .leg-indice { position: static; }
}
@media (max-width: 599px) {
  .leg-coda, .e404__azioni { flex-direction: column; align-items: flex-start; }
  .leg-scheda { padding: 1.1rem 1.2rem; }
}
/* telefoni in orizzontale: il link di coda («Torna al sito», «Contatti») va su
   una riga sua. In riga coi bottoni finiva, scorrendo, sotto il semaforo fisso
   in basso a destra (a 667x375 il tocco cadeva sul bottone Instagram). Il
   ::after e' l'a-capo della riga flex; il passo dimezzato pareggia i due gap. */
@media (max-height: 500px) and (orientation: landscape) {
  .e404__azioni { row-gap: .6rem; }
  .e404__azioni::after { content: ""; flex-basis: 100%; order: 1; }
  .e404__azioni .link-underline { order: 2; }
}
/* tocco e corpo minimo (PIANO): righe dell'indice da 44, micro-etichette a .75rem */
@media (max-width: 1366px), (max-height: 500px) and (orientation: landscape) {
  .leg-indice__lista a { padding: .74rem 0; }
  .leg-indice__lista a span, .leg-sez__t span, .leg-tabella th, .leg-indice__h, .leg-apertura__data { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .leg-testo a, .leg-indice__lista a, .e404__titolo .titolo-script, .e404__testo a { transition: none; }
}