/* ═══════════════════════════════════════════════════════════════════════════
   HOME DEL PRINCIPALE — «La croce che si compone» (9/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   Solo quello che è di questa pagina. Token, tipografia, pulsanti, riga di
   sistema, testata, piè di pagina, barra rapida, promo e chiusura sono comuni
   (../../Sistema/css/). Regole: DESIGN.md e _PROGETTO/03_DIREZIONE_E_MOVIMENTO.md.
   Nato dalla prova approvata il 9/10 (../direzione/direzione.css).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Movimento del principale (estende --nl-esce e --nl-cassetto comuni) */
  --nl-muove: cubic-bezier(.77, 0, .175, 1);
  --nl-t-tocco: 140ms;
  --nl-t-stato: 200ms;
  --nl-t-passo: 400ms;
  /* L'entrata dell'apertura, più lenta del 30% dal 9/10 (Mauro): tutti i suoi
     tempi sono moltiplicati per questo numero. Si regola qui. */
  --lento: 1.3;

  /* Quello che resta fermo in cima: testata e barra delle sezioni (10/10). */
  --cima: var(--nl-cima);
  --bordo: max(var(--nl-margine), (100vw - var(--nl-contenitore)) / 2);

  /* L'area attiva: la croce dell'indice la legge */
  --area: var(--nl-blu);
  --area-tinta: var(--nl-tinta-blu);
}

.pulsante--grande { min-height: 3.5rem; padding-inline: 1.75rem; font-size: 1.0625rem; }

/* ── La croce: geometria comune (griglia 3×3 del simbolo) ───────────────── */
.croce { position: relative; aspect-ratio: 1; }
.croce-el { position: absolute; width: 66.667%; height: 66.667%; }
.croce-el--foto { left: 0; top: 0; clip-path: url(#clip-azzurro); background: var(--nl-tinta-blu); overflow: hidden; }
.croce-el--accento { left: 33.333%; top: 33.333%; clip-path: url(#clip-accento); background: var(--nl-accento); }
.croce-el--foto img { position: absolute; max-width: none; }

/* Il segno (la croce piccola nel colore di un'area) sta in Sistema/css/componenti.css. */

/* ── 1. Apertura: alta quanto la finestra ───────────────────────────────── */
.apertura-croce {
  position: relative; z-index: 1; overflow-x: clip;
  display: grid; min-height: calc(100svh - var(--cima) - var(--nl-barra));
  background: var(--nl-ghiaccio);
}
.movimento:not(.testi-pronti) .apertura-croce { visibility: hidden; }
.apertura-griglia {
  display: grid; align-content: center;
  grid-template-columns: minmax(var(--nl-margine), 1fr) repeat(12, minmax(0, calc(var(--nl-contenitore) / 12))) minmax(var(--nl-margine), 1fr);
}
.apertura-testo { grid-column: 2 / -2; grid-row: 2; position: relative; z-index: 2; padding-block: .5rem 3rem; }
.apertura-titolo { font-size: min(clamp(2.6rem, 1.5rem + 4.6vw, 6rem), 8.5svh); line-height: .92; letter-spacing: -.012em; text-wrap: balance; }
.apertura-titolo .titolo-riga { display: block; }
.apertura-titolo .titolo-riga > span { display: block; }
.movimento .apertura-titolo .titolo-riga { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.apertura-lead { max-width: 34rem; margin-top: 1.6rem; color: var(--nl-ink-2); text-wrap: pretty; }
.apertura-lead strong { font-weight: 500; color: var(--nl-ink); }

/* La cornice taglia la croce sul bordo destro senza tagliare il pannello della
   ricerca, che deve uscire dall'apertura. */
.croce-cornice { grid-column: 5 / -1; grid-row: 1; display: flex; justify-content: flex-end; overflow: hidden; }
.croce--apertura { flex: none; width: min(56vw, 20rem); margin: 1.5rem -7vw 0 0; }
.croce-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.croce-fondo { fill: var(--nl-blu); }
.croce-accento { fill: var(--nl-accento); }
.spazza { fill: none; stroke: #fff; stroke-width: 202; }
.croce-foto { transform-box: fill-box; transform-origin: 30% 35%; }
.croce-costruzione { fill: none; stroke: var(--nl-blu); stroke-width: .7; opacity: 0; }
/* La croce a contorno del brand book, una volta e mezza più grande e spostata:
   sta dietro e si vede solo sul ghiaccio. */
.croce-eco { position: absolute; left: -42%; top: -30%; width: 150%; height: 150%; overflow: visible; fill: none; stroke: var(--nl-blu); stroke-width: .9; opacity: .55; }

@media (min-width: 64em) {
  .apertura-croce { min-height: calc(100svh - var(--cima)); }
  .apertura-griglia { align-items: center; }
  .apertura-testo { grid-column: 2 / 8; grid-row: 1; padding-block: 2rem 2.25rem; }
  .apertura-lead { margin-top: 1rem; }
  .cerca { margin-top: 1.25rem; }
  .cerca-prova { margin-top: .6rem; }
  .apertura-azioni { margin-top: 1.25rem; }
  .croce-cornice { grid-column: 8 / -1; align-self: stretch; align-items: center; }
  .croce--apertura { width: min(100% + 2vw, 44rem, calc(100svh - var(--cima) - 7rem)); margin: 0 -2vw 0 0; }
}

/* La ricerca unica */
.cerca { position: relative; margin-top: 1.75rem; max-width: 36rem; }
.cerca-etichetta { display: block; margin-bottom: .5rem; font-size: 1.0625rem; font-weight: 500; color: var(--nl-ink); }
.cerca-riga { position: relative; }
.cerca-riga > .icona { position: absolute; left: 1.35rem; top: 50%; translate: 0 -50%; width: 1.5rem; height: 1.5rem; color: var(--nl-blu-ink); pointer-events: none; }
.cerca input {
  width: 100%; height: 4.1rem; padding: 0 1.5rem 0 3.6rem;
  border: 1.5px solid var(--nl-ink-3); border-radius: var(--nl-r-pillola); background: var(--nl-bianco);
  font: inherit; font-size: 1.2rem; color: var(--nl-ink);
  transition: border-color var(--nl-t-stato) ease, box-shadow var(--nl-t-stato) ease;
}
.cerca input::placeholder { color: var(--nl-ink-3); opacity: 1; }
.cerca input:focus { outline: none; border-color: var(--nl-blu-notte); box-shadow: 0 0 0 3px var(--nl-blu-notte); }
.cerca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cerca-prova { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; font-size: 1rem; color: var(--nl-ink-2); }
.cerca-suggerimenti { display: contents; }
.cerca-suggerimento {
  padding: .35rem .85rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-pillola); background: var(--nl-bianco);
  font: inherit; font-size: 1rem; color: var(--nl-ink); cursor: pointer;
  transition: border-color var(--nl-t-stato) ease, transform var(--nl-t-tocco) var(--nl-esce);
}
.cerca-suggerimento:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .cerca-suggerimento:hover { border-color: var(--nl-blu-ink); } }

.cerca-pannello {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 30;
  max-height: min(28rem, 60vh); overflow: auto; overscroll-behavior: contain;
  padding: .5rem; border-radius: var(--nl-r-scheda); background: var(--nl-bianco); box-shadow: var(--nl-ombra);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity var(--nl-t-stato) var(--nl-esce), transform var(--nl-t-stato) var(--nl-esce), visibility 0s linear var(--nl-t-stato);
}
.cerca-pannello.aperto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cerca-stato { padding: .6rem .75rem .25rem; font-size: 1rem; color: var(--nl-ink-2); }
.cerca-stato:empty { display: none; }
.cerca-lista { list-style: none; padding: 0; margin: 0; }
.cerca-gruppo { padding: .9rem .75rem .35rem; font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-ink-2); }
.cerca-voce { display: flex; align-items: center; gap: .85rem; padding: .6rem .75rem; border-radius: var(--nl-r-medio); color: var(--nl-ink); text-decoration: none; cursor: pointer; }
.cerca-voce[aria-selected="true"], .cerca-voce:hover { background: var(--nl-vetro); }
.cerca-voce-testo { display: flex; flex-direction: column; line-height: 1.3; }
.cerca-voce-testo strong { font-weight: 700; }
.cerca-voce-testo span { font-size: 1rem; color: var(--nl-ink-2); }
.cerca-resto { padding: .2rem .75rem .5rem 4.1rem; font-size: .9375rem; color: var(--nl-ink-2); }
.cerca-voce mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--nl-accento); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.volto { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--nl-tinta-blu); }
.volto--vuoto { display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: var(--nl-blu-ink); }

.apertura-azioni { margin-top: 1.75rem; gap: 1rem 1.75rem; align-items: center; }
.link-tel { display: inline-flex; align-items: center; gap: .5rem; color: var(--nl-ink-2); text-decoration: none; font-size: 1.0625rem; }
.link-tel strong { color: var(--nl-ink); font-weight: 700; }
.link-tel .icona { color: var(--nl-blu-ink); }
@media (hover: hover) and (pointer: fine) { .link-tel:hover strong { text-decoration: underline; } }

/* ── 3. Cosa facciamo: la croce che si colora ──────────────────────────────
   Più aria (9/10): ogni area ha quasi uno schermo per sé. */
.aree { padding-block: var(--nl-sezione); background: var(--nl-bianco); }
.aree-testa { max-width: 40rem; }
.aree-testa .lead { margin-top: 1rem; color: var(--nl-ink-2); }
.croce-indice { display: none; }

/* La griglia delle nove aree (10/10): tessere con il segno e il nome. Quella
   scelta prende la tinta e il filo dell'area. */
.aree-tessere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
/* Dieci aree dal 23/10 (Epilazione laser a sé): l'ultima, se resta da sola nella riga, la
   prende tutta. È Analisi, che porta al Lab: così si legge come un'uscita, non come un avanzo. */
.area-tessera:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.area-tessera {
  position: relative; display: grid; justify-items: start; align-content: space-between; gap: .6rem;
  min-height: 5.25rem; padding: .85rem .9rem;
  border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio);
  background: var(--nl-bianco); color: var(--nl-ink-2);
  font: 500 1rem/1.15 var(--nl-font-testo); text-align: left;
  transition: background-color var(--nl-t-stato) ease, border-color var(--nl-t-stato) ease, color var(--nl-t-stato) ease;
}
.area-tessera .segno { width: 1.5rem; height: 1.5rem; }
.area-tessera .segno::before { background: var(--nl-ink-3); opacity: .35; transition: opacity var(--nl-t-stato) ease, background-color var(--nl-t-stato) ease; }
.area-tessera[aria-selected="true"] { background: var(--t); border-color: var(--c); color: var(--nl-ink); font-weight: 700; box-shadow: inset 0 -4px 0 var(--c); }
.area-tessera[aria-selected="true"] .segno::before { background: var(--nl-blu); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .area-tessera:hover { border-color: var(--nl-ink-3); color: var(--nl-ink); }
  .area-tessera:hover .segno::before { background: var(--nl-blu); opacity: 1; }
}
.area-tessera:active { transform: scale(.98); }
.area-tessera:focus-visible { outline: 3px solid var(--nl-blu-ink); outline-offset: 2px; }
@media (max-width: 29.99em) {
  .area-tessera { min-height: 4.75rem; padding: .7rem .6rem; font-size: .875rem; }
  .area-tessera-nome { max-width: 100%; hyphens: auto; overflow-wrap: break-word; }
}

/* I pannelli uno sopra l'altro nella stessa cella: la sezione è alta quanto il
   più lungo e non salta cambiando area (10/10, Mauro). Quelli chiusi restano
   al loro posto ma invisibili, anche ai lettori di schermo e al tasto Tab
   (visibility); quello aperto ha .is-aperta (js/home.js). */
.aree-pannelli { display: grid; margin-top: 1.75rem; }
.aree-pannelli > .area { grid-area: 1 / 1; visibility: hidden; }
.aree-pannelli > .area.is-aperta { visibility: visible; }
.movimento .aree-pannelli > .area.is-aperta { animation: area-entra var(--nl-t-passo) var(--nl-esce); }
@keyframes area-entra { from { opacity: 0; transform: translateY(6px); } }
.area { padding-top: 1.5rem; border-top: 4px solid var(--c); }
.area-nome { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 900; text-transform: uppercase; line-height: 1.02; text-wrap: balance; }
.area-nome a { color: var(--nl-ink); text-decoration: none; }
.area-nome a::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .02em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .35; transition: transform var(--nl-t-stato) var(--nl-esce), opacity var(--nl-t-stato) ease; }
@media (hover: hover) and (pointer: fine) { .area-nome a:hover::after { transform: translateX(.2em); opacity: 1; } }
.area-testo { margin-top: .75rem; font-size: 1.125rem; line-height: 1.55; color: var(--nl-ink-2); max-width: 34rem; text-wrap: pretty; }
.area-specialita { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; max-width: 38rem; }
.area-specialita a { color: var(--nl-ink); text-decoration: none; font-size: 1.0625rem; border-bottom: 1px solid var(--nl-bordo); transition: border-color var(--nl-t-stato) ease; }
@media (hover: hover) and (pointer: fine) { .area-specialita a:hover { border-color: var(--nl-ink); } }
.area-altre a { color: var(--nl-blu-ink); font-weight: 700; border-bottom-color: transparent; }
.area-esterno { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-family: var(--nl-font-marchio); font-weight: 700; color: var(--nl-blu-ink); }

@media (min-width: 64em) {
  .aree-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3rem; align-items: center; }
  /* Enorme e tagliata dal bordo sinistro della finestra, alta al massimo
     quanto lo schermo libero sotto testata e barra. */
  .croce-indice { display: block; grid-column: 1 / 7; margin-left: calc(-1 * var(--bordo)); }
  .croce--indice { width: min(100%, calc(100svh - var(--cima) - 4rem)); translate: -10% 0; }
  .aree-scelta { grid-column: 7 / 13; }
  /* Da computer la sezione sta nella finestra: tessere basse, segno e nome in riga. */
  .aree { padding-block: clamp(3rem, 8svh, 6rem); }
  .area-tessera { display: flex; align-items: center; gap: .6rem; min-height: 3.5rem; padding: .5rem .85rem; }
  .area-tessera .segno { width: 1.25rem; height: 1.25rem; }
  .aree-pannelli { margin-top: 1.25rem; }
  .area { padding-top: 1.1rem; }
}

/* La croce dell'indice: foto dell'area attiva e accento nel suo colore. */
.croce--indice .croce-el--accento { background: var(--area); }
.croce--indice .croce-el--foto { background: var(--area-tinta); }
.croce--indice .croce-el--foto > * { position: absolute; inset: 0; opacity: 0; }
.croce--indice .croce-el--foto > .attiva { opacity: 1; }
.croce--indice .croce-el--foto img { width: 124%; height: 124%; left: -2%; top: -4%; right: auto; bottom: auto; object-fit: cover; object-position: 50% 22%; }
/* Senza foto: l'icona dell'area, grande, nel suo colore (nella parte
   dell'elemento che resta visibile, in alto a destra). */
.foto-icona { display: grid; place-items: center; padding: 8% 8% 46% 46%; color: var(--area); }
.foto-icona .icona { width: 100%; height: auto; max-width: 9rem; aspect-ratio: 1; stroke-width: .9; }

/* ── 4. Tre cose prima di venire ───────────────────────────────────────── */
.risposte-centro-griglia { display: grid; gap: 0; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: 0; list-style: none; }
.risposta-centro { display: grid; align-content: start; gap: .9rem; padding-block: 2rem; border-top: 1px solid var(--nl-filetto-su-scuro); }
.risposta-centro p:not(.etichetta) { color: var(--nl-ink-su-scuro-2); max-width: 26rem; }
.risposta-centro .risposta-centro-grande { color: var(--nl-bianco); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
a.risposta-centro-grande { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.risposta-centro-grande:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }
.risposta-centro .link-freccia { margin-top: .5rem; color: var(--nl-bianco); }
@media (min-width: 64em) {
  .risposte-centro-griglia { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
  .risposta-centro { padding-block: 2.25rem 0; }
}

/* ── 5. I medici ───────────────────────────────────────────────────────── */
.medici-lead { margin-top: 1.25rem; max-width: 34rem; color: var(--nl-ink-2); }
.medici-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.medico a { display: grid; gap: .35rem; color: var(--nl-ink); text-decoration: none; }
/* La foto con il quarto di cerchio del simbolo in alto a destra. */
.medico-foto { position: relative; aspect-ratio: 4 / 5; margin-bottom: .75rem; overflow: hidden; border-radius: var(--nl-r-scheda); border-top-right-radius: 50% 40%; background: var(--nl-tinta-blu); }
.medico-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(var(--scala, 1)); transform-origin: var(--fuoco, 50% 20%); }
.medico-nome { font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.25; }
.medico-specialita { color: var(--nl-ink-2); }
@media (hover: hover) and (pointer: fine) { .medico a:hover .medico-nome { text-decoration: underline; text-underline-offset: .2em; } }
@media (min-width: 64em) { .medici-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

/* ── 6. Le sedi: cinque righe, come un'insegna ─────────────────────────── */
.sedi-centro-lista { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--nl-bordo); }
.sede-centro { display: grid; gap: .35rem 2rem; align-items: baseline; padding-block: 1.5rem; border-top: 1px solid var(--nl-bordo); }
.sede-centro-citta { font-size: clamp(2rem, 1.3rem + 3vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: var(--nl-ink); }
.sede-centro-indirizzo { color: var(--nl-ink-2); font-size: 1.125rem; }
.sede-centro-dati { display: grid; gap: .75rem; }
@media (min-width: 48em) { .sede-centro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; } }

/* ── 7. Perché New Life ────────────────────────────────────────────────── */
.perche-centro-griglia { display: grid; gap: 2.5rem 4rem; }
.motivi-centro { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.motivo-centro { display: grid; gap: .5rem; padding-block: 1.5rem; border-top: 1px solid var(--nl-bordo); }
.motivo-centro p { color: var(--nl-ink-2); max-width: 34rem; }
@media (min-width: 64em) {
  .perche-centro-griglia { grid-template-columns: 5fr 7fr; align-items: start; }
  .perche-centro-griglia > .titolo { position: sticky; top: calc(var(--cima) + 2rem); }
  .motivi-centro { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
}

/* ── 8. Assicurazioni e fondi ──────────────────────────────────────────── */
.convenzioni-griglia { display: grid; gap: 2.5rem 4rem; }
.convenzioni-lead { margin-block: 1.25rem 1.5rem; max-width: 32rem; color: var(--nl-ink-2); }
.convenzioni-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 2rem; margin: 0; padding: 0; list-style: none; align-content: start; }
.convenzioni-lista li { padding-block: 1rem; border-top: 1px solid var(--nl-bordo); font-size: 1.125rem; font-weight: 700; }
@media (min-width: 64em) { .convenzioni-griglia { grid-template-columns: 5fr 7fr; } }

/* ── 9. Consigli ───────────────────────────────────────────────────────── */
.consigli-lista { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.consiglio { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; gap: .75rem 1rem; height: 100%; padding: 1.5rem 1.5rem 1.75rem; border-radius: var(--nl-r-scheda); background: var(--nl-ghiaccio); color: var(--nl-ink); text-decoration: none; transition: background-color var(--nl-t-stato) ease; }
.consiglio .etichetta { grid-column: 1 / -1; align-self: start; }
.consiglio-titolo { font-size: var(--nl-t-scheda); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.consiglio .icona { color: var(--nl-blu-ink); transition: transform var(--nl-t-stato) var(--nl-esce); }
@media (hover: hover) and (pointer: fine) { .consiglio:hover { background: var(--nl-vetro); } .consiglio:hover .icona { transform: translateX(3px); } }
@media (min-width: 64em) { .consigli-lista { grid-template-columns: repeat(3, 1fr); } .consiglio { min-height: 14rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO — solo con html.movimento (Sistema/js/movimento.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Entrata, una volta per visita (9/10, Mauro: ogni elemento entra, in una
   coreografia sola; poi «leggermente più lenta», --lento). Parte quando i
   testi ci sono (.testi-pronti). In quest'ordine:
   croce — la griglia di costruzione del brand book si disegna; l'elemento
     azzurro si riempie girando attorno al suo centro come una lancetta e la
     foto dentro si assesta; l'accento fa lo stesso dall'angolo opposto; la
     griglia sparisce e si disegna la croce a contorno;
   testo — le righe del titolo salgono dalla loro finestra, si stende il
     trattino, il testo si scopre dall'alto, il campo di ricerca si srotola da
     sinistra, i suggerimenti arrivano uno dopo l'altro, poi i pulsanti.
   Solo transform, opacity, clip-path e i tratti degli SVG. I ritagli valgono
   solo durante l'entrata (backwards): dopo, il pannello dei risultati deve
   poter uscire dal campo. Nomi con «nlc-»: i comuni stanno in movimento.css. */
.entrata.testi-pronti .croce-costruzione { animation: nlc-costruzione calc(2.1s * var(--lento)) linear both; }
.entrata.testi-pronti .croce-costruzione path { stroke-dasharray: 1; animation: nlc-traccia calc(.8s * var(--lento)) var(--nl-muove) both; }
.entrata.testi-pronti .croce-costruzione path:nth-child(2) { animation-delay: calc(.06s * var(--lento)); }
.entrata.testi-pronti .croce-costruzione path:nth-child(3) { animation-delay: calc(.12s * var(--lento)); }
.entrata.testi-pronti .croce-costruzione path:nth-child(4) { animation-delay: calc(.18s * var(--lento)); }
.entrata.testi-pronti .croce-costruzione path:nth-child(5) { animation-delay: calc(.3s * var(--lento)); animation-duration: calc(1s * var(--lento)); }
.entrata.testi-pronti .croce-costruzione path:nth-child(6) { animation-delay: calc(.4s * var(--lento)); animation-duration: calc(1s * var(--lento)); }
.entrata.testi-pronti .spazza { animation: nlc-spazza calc(.75s * var(--lento)) var(--nl-muove) calc(.45s * var(--lento)) both; }
.entrata.testi-pronti .spazza--accento { animation-delay: calc(.8s * var(--lento)); animation-duration: calc(.7s * var(--lento)); }
.entrata.testi-pronti .croce-foto { animation: nlc-assesta calc(1.5s * var(--lento)) var(--nl-esce) calc(.45s * var(--lento)) both; }
.entrata.testi-pronti .croce-eco path { stroke-dasharray: 1; animation: nlc-traccia calc(1.4s * var(--lento)) var(--nl-esce) calc(1.2s * var(--lento)) both; }

.entrata.testi-pronti .apertura-titolo .titolo-riga > span { animation: nlc-sale calc(.85s * var(--lento)) var(--nl-esce) calc(.15s * var(--lento)) both; }
.entrata.testi-pronti .apertura-titolo .titolo-riga + .titolo-riga > span { animation-delay: calc(.27s * var(--lento)); }
.entrata.testi-pronti .apertura-titolo.trattino::after { transform-origin: left; animation: nlc-stende calc(.6s * var(--lento)) var(--nl-esce) calc(.7s * var(--lento)) both; }
.entrata.testi-pronti .apertura-lead { animation: nlc-scopre calc(.8s * var(--lento)) var(--nl-esce) calc(.6s * var(--lento)) backwards; }
.entrata.testi-pronti .cerca-etichetta { animation: nlc-scopre calc(.6s * var(--lento)) var(--nl-esce) calc(.8s * var(--lento)) backwards; }
.entrata.testi-pronti .cerca-riga { animation: nlc-srotola calc(.8s * var(--lento)) var(--nl-muove) calc(.85s * var(--lento)) backwards; }
.entrata.testi-pronti .cerca-riga > .icona { animation: nlc-gira calc(.7s * var(--lento)) var(--nl-esce) calc(1.15s * var(--lento)) both; }
.entrata.testi-pronti .cerca-prova > span:first-child { animation: nlc-arriva calc(.45s * var(--lento)) var(--nl-esce) calc(1.15s * var(--lento)) both; }
.entrata.testi-pronti .cerca-suggerimento { animation: nlc-arriva calc(.45s * var(--lento)) var(--nl-esce) both; animation-delay: calc((1.2s + var(--i, 0) * 60ms) * var(--lento)); }
.entrata.testi-pronti .apertura-azioni > * { animation: nlc-arriva calc(.55s * var(--lento)) var(--nl-esce) calc(1.4s * var(--lento)) both; }
.entrata.testi-pronti .apertura-azioni > * + * { animation-delay: calc(1.5s * var(--lento)); }

@keyframes nlc-traccia { from { stroke-dashoffset: 1; } }
@keyframes nlc-costruzione { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nlc-spazza { from { stroke-dasharray: 0 4; } to { stroke-dasharray: 1 3; } }
@keyframes nlc-assesta { from { transform: scale(1.22) rotate(-2deg); } }
@keyframes nlc-sale { from { transform: translateY(105%); } }
@keyframes nlc-stende { from { transform: scaleX(0); } }
@keyframes nlc-scopre { from { clip-path: inset(0 0 100% 0); transform: translateY(.6rem); } to { clip-path: inset(0 0 -1rem 0); } }
@keyframes nlc-srotola { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes nlc-gira { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
@keyframes nlc-arriva { from { opacity: 0; transform: translateY(.75rem) scale(.96); } }

/* Un clic sulla barra delle aree porta all'area scorrendo, non a salti. */
html.movimento { scroll-behavior: smooth; }

/* La croce che si colora: cambio d'area senza bloccare lo scorrimento. */
.movimento .croce--indice .croce-el--foto { transition: background-color var(--nl-t-passo) var(--nl-muove); }
.movimento .croce--indice .croce-el--foto > * { transition: opacity var(--nl-t-passo) var(--nl-muove), filter var(--nl-t-passo) var(--nl-muove), transform 1.2s var(--nl-esce); filter: blur(2px); transform: scale(1.04); }
.movimento .croce--indice .croce-el--foto > .attiva { filter: none; transform: none; }
.movimento .croce--indice .croce-el--accento { transition: background-color var(--nl-t-passo) var(--nl-muove), translate var(--nl-t-passo) var(--nl-muove); }
.movimento .croce--indice.cambia .croce-el--accento { translate: 4% 4%; }
@media (min-width: 64em) {
  .movimento .area::before { transform: scaleX(.14); transition: transform var(--nl-t-passo) var(--nl-muove); }
  .movimento .area.attiva::before { transform: scaleX(1); }
}

/* Chi ha chiesto meno movimento non ha html.movimento: niente entrata, niente
   scorrimento animato. Il cambio di colore della croce resta, breve, perché
   dice qualcosa. */
@media (prefers-reduced-motion: reduce) {
  .croce--indice .croce-el--accento, .croce--indice .croce-el--foto > * { transition: opacity 150ms ease, background-color 150ms ease; }
  .cerca-suggerimento:active { transform: none; }
}